PDA

View Full Version : make jquery work at bottom of page



vinpkl
06-09-2016, 11:39 AM
hi all

if there is requirement to keep scripts near closing body tag then how do you make your code work if its called near opening body tag ??

Just like this below code it doesnt work if jquery library is loaded near </body> closing tag.

But it works if jquery library is loaded in <head> tag.



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Async Test</title>
</head>
<body>
<div>Loading...</div>
<script type="text/javascript">
$(document).ready(function () {
$('div').html('Hello world!');
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
</body>
</html>


how can i make this code work while loading jquery library at the bottom of page.

thanks

vineet

Beverleyh
06-09-2016, 11:43 AM
The main jQuery library should be loaded first;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Async Test</title>
</head>
<body>
<div>Loading...</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
$('div').html('Hello world!');
});
</script>

</body>
</html>

vinpkl
06-09-2016, 11:55 AM
Hi beverlyh

the problem is if i load jquery in the <head> then google page speed insight shows error



Eliminate render-blocking Javascript and css in above-the-fold content
Your page has 7 blocking scripts and 10 css resources. This causes delay in rendering your page.


thats why i want to put it in bottom of page

how can i do that ??

vineet

Beverleyh
06-09-2016, 12:00 PM
Please see my earlier example.

Notice how the jQuery library is placed under the content, but before the </body> tag - yours was the other way around. The inline jQuery script has to come after the main jQuery library (same with all jQuery plugins/inits)

vinpkl
06-09-2016, 12:17 PM
Hi beverleyh

yes i have see that

but the problem is that i have a lengthy page , so i just posted an example showing my code setup

There are many small different code snippets which are wrapped inside document.ready function and near the body opening tag and some are near the middle of page. and jquery library is loading near </body> closing tag.


<script type="text/javascript">
$(document).ready(function () {
$('div').html('Hello world!');
});
</script>


if i place jquery library in the <head> or near the <body> opening tag then also google displays error in page speed insight

so it needs to go the bottom but then my code stops working

vineet

vinpkl
06-09-2016, 02:16 PM
Hi beverleyh

Is there any function to detect if jquery has been loaded or not.

so that i can replace it with document.ready function

vineet

jscheuer1
06-09-2016, 04:18 PM
If I understand the question yes, There is a way to detect if jQuery is available and to load it before using it if it's not. But that won't really solve the problem. If in fact there is one. That said, replacing it (whatever you mean by "it") with document ready (that's also dependent upon jQuery) won't help.

First of all, Insight isn't something like the validator, and even the validator can be wrong, or unimportant. That said, it's right. Ideally all scripts are loaded at the end of the page. If you do that, you have no problem, just load jQuery before the ones that use it. Simple.

But, if as you say, you have these little jQuery dependent scripts scattered throughout the page, then you have no choice but to load jQuery before them.

What you really should do is consolidate them all into one script, load jQuery, then them. Do this just before the closing </body> tag. If you're not willing to do that, just ignore this particular bit of advice from Insight. Anything else you do either won't satisfy Insight, and/or won't really speed up the page.

vinpkl
06-09-2016, 04:33 PM
Hi jscheuer1

below is example of one single slider


<script type="text/javascript">
$(document).ready(function() {
var owl = $("#slides");
owl.owlCarousel({
navigation : false,
autoPlay: 4000,
slideSpeed : 200,
paginationSpeed : 200,
transitionStyle : "goDown",
singleItem:true
});
$("#slider_holder .icon-left-open").click(function(){
$("#slides").trigger('owl.prev');
});

$("#slider_holder .icon-right-open").click(function(){
$("#slides").trigger('owl.next');
});
});
</script>


i have this kind of 5 sliders at different places in the body.

now you say i should combine them and insert them at the bottom of page.

my question is if i have to show 5 sliders at different places of body then how will i show or call them from the bottom of page ??

thanks
vineet

jscheuer1
06-09-2016, 06:08 PM
It will work unless you're already doing something wrong and just being lucky. If I could see the page, I could be more specific. But in the situation you describe, each slider is either identical and you only need one of the five inits anyway, or - more likely, you're using one or more unique selectors (red in the below) in each of the five inits. The sliders don't care where in the body this code is. They only care that it points to them. That code (highlighted and all within it):



$(document).ready(function() {
var owl = $("#slides");
owl.owlCarousel({
navigation : false,
autoPlay: 4000,
slideSpeed : 200,
paginationSpeed : 200,
transitionStyle : "goDown",
singleItem:true
});
$("#slider_holder .icon-left-open").click(function(){
$("#slides").trigger('owl.prev');
});

$("#slider_holder .icon-right-open").click(function(){
$("#slides").trigger('owl.next');
});
});

Doesn't execute until the entire page is loaded anyway, so - it might as well be at the end of the page. In fact, if you do put it at the end, you don't need document ready, except of course for the fact that it creates a unique scope, which - for example allows you to reuse the owl variable without overwriting previous uses of it. However, the code could be written with unique variable names for each slider, then you wouldn't need document ready at all. Or an anonymous function could be used. Now, before you do anything, backup a working copy of the page, and for now, I would just combine the five document ready scripts into one without changing any of the code yet. In other words, still have 5 document ready calls, just all 5 in one script, one after the other. If you want to make it more efficient later or have any trouble combining the scripts, give me a link to the problematic page, so I can check it out.

vinpkl
06-10-2016, 12:29 PM
hi jscheuer1

is "init()" function feature availabe for all jquery libraries and plugins like slider, menus, photogalleries etc

vineet

jscheuer1
06-10-2016, 03:04 PM
When I said init in the above I meant it generically, referring to the code you posted as initializing an instance of the owl slider. However, it is a popular function name used by many plugin authors and also by coders in general. It's not a required function, although again, almost all scripts, other than the most simplistic, have some sort of initialization or setup. But as I say, the person writing the code doesn't have to use the name init. And if they do, it might be used for an internal function, not necessarily for what I was referring to as an init.

So in the sense I was using it, I would say most plugins and scripts in general do have an init. A few simply look for something specific on the page and act on that if found. Even those often have an optional init if you want to fine tune what they do.