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.

Code:

<!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;

Code:

<!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

Code:

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.

Code:

<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

Code:

<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):

Code:

$(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.