Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: make jquery work at bottom of page

  1. #1
    Join Date
    Nov 2011
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default make jquery work at bottom of page

    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

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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>
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Nov 2011
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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)
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. #5
    Join Date
    Nov 2011
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Nov 2011
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 06-09-2016 at 04:26 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Nov 2011
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 06-10-2016 at 03:11 PM. Reason: English Usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Nov 2011
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    hi jscheuer1

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

    vineet

Similar Threads

  1. Replies: 1
    Last Post: 07-24-2014, 10:47 AM
  2. Replies: 1
    Last Post: 05-08-2012, 12:51 AM
  3. Replies: 5
    Last Post: 09-20-2010, 04:55 PM
  4. anyone knows to make constant bottom bar for multipages?
    By caridead in forum Looking for such a script or service
    Replies: 0
    Last Post: 07-11-2009, 07:19 AM
  5. Replies: 0
    Last Post: 06-30-2007, 11:06 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •