SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    JavaScript chacheing/loading question?

    Hi,

    Im trying to move all my js (jquery, fancybox, etc) to the bottom of my pages. But doing so is making my photo gallery not work in ie only. Anyone knows why that would be let me know? But i imagine there is no fix for that so...

    This leads me to my question. Im thinking ill just put jquery/photo gallery js at the top of this one page and keep it at the bottom in the others. 99% will enter my site on the index page and the jquery will be cached. Now when they navigate to my photo gallery page and jquery is in the head, does the browser skip the user load delay when it encounters jquery because it is already cached or does it still delay the load time in some way?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Im trying to move all my js (jquery, fancybox, etc) to the bottom of my pages. But doing so is making my photo gallery not work in ie only. Anyone knows why that would be let me know?
    That depends on what's going on wit the page itself. May we have a look? There's always a workable solution that can be put in to place.

    Quote Originally Posted by EricWatson View Post
    does the browser skip the user load delay when it encounters jquery because it is already cached
    That all depends on whether the browser has recently accessed the same jquery file. You can for example reference a google-hosted version of it, which many other people use too, increasing the likelihood that visitors will have already cached it.

    http://code.google.com/apis/librarie...de.html#jquery

    Quote Originally Posted by EricWatson View Post
    or does it still delay the load time in some way?
    Because you cannot guarantee that the caching will occur, you should put some thought in to that delay.

    Loading the library from the head means that the delay will occur before your page loads, resulting in a longer delay for your user before they get to see your page load.

    Loading the library from the end of the body means that the page appears to load much faster, because the delay occurs after the page has rendered itself.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Sure! I would much rather keep my jquery library and its plugins at the bottom. So if you could find a fix for IE that would be awesome. Here is the exact same photo gallery I am using on my page in question. It's just striped down to the bear minimum. http://www.visibilityinherit.com/cod...llery-demo.php. Currently all the js is in the head. If you move it to the bottom IE stops working. Thanks for looking!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Sure! I would much rather keep my jquery library and its plugins at the bottom. So if you could find a fix for IE that would be awesome. Here is the exact same photo gallery I am using on my page in question. It's just striped down to the bear minimum. http://www.visibilityinherit.com/cod...llery-demo.php. Currently all the js is in the head. If you move it to the bottom IE stops working. Thanks for looking!
    From the code, it looks like you're trying to run the gallery function before it has been created.

    Move the document ready block below the creation of the gallery function, and use the var keyword when creating the gallery function.

    Code javascript:
    var gallery = function() {
        ...
    };
    ...
    $(document).ready(function(){
        gallery();
    });

    By the way, jQuery now has a handy callback to replace the document ready one.

    Code javascript:
    $(function () {
        ...
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I wonder why the doc ready was above? Strange that it even worked. OK I tried a few combos but nothing worked in IE. I may of been doing it wrong. Here is a complete working page with absolute links and the doc ready function at the bottom. Can you see what is missing?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{ visibility: inherit; } The Photo Gallery</title>
    <style type="text/css">
    body{background:#ccc;}
    </style> 
    <link href="basic-gallery.css" rel="stylesheet" type="text/css"> 
    
    </head>
    <body>
    
    <div id="gallery">
      <div id="photos">
        <b id="pic1"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/1.jpg" alt=""></b>
        <b id="pic2"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/2.jpg" alt=""></b>
        <b id="pic3"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/3.jpg" alt=""></b>
        <b id="pic4"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/4.jpg" alt=""></b>
        <b id="pic5"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/5.jpg" alt=""></b>
        <b id="pic6"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/6.jpg" alt=""></b>
        <b id="pic7"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/7.jpg" alt=""></b>
        <b id="pic8"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/8.jpg" alt=""></b>
        <b id="pic9"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/9.jpg" alt=""></b>
        <b id="pic10"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/10.jpg" alt=""></b>
        <noscript><p>You need to enable Javascript to view the Photo Gallery!</p></noscript>
      </div>
      <div id="controls">
        <a href="javascript:;" onclick="this.blur();" id="first">&lt;&lt;</a>
        <a href="javascript:;" onclick="this.blur();" id="previous">&lt;</a>
        <a id="number">1 of 10</a> 
        <a href="javascript:;" onclick="this.blur();" id="next">&gt;</a>
        <a href="javascript:;" onclick="this.blur();" id="last">&gt;&gt;</a>	
      </div>
    </div>	
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    gallery = function() {
    var current = 1;
    var total = $('#photos b').length;
    $('#photos b').hide();
    $('#pic1').fadeIn('slow');
    $('#number').html('1 of ' + total );
    setHeight(1)
    
    $('#first').click(function(){
    var prev  = 1;
    if (current != 1) {
    $('#pic' + current).fadeOut('slow');
    setHeight(prev)
    $('#pic' + prev).fadeIn('slow');
    current = 1;
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
    
    $('#previous').click(function(){
    var prev  = current - 1;
    if (prev < 1) prev = 1;
    if (current != 1) {
    $('#pic' + current).fadeOut('slow');
    $('#pic' + prev).fadeIn('slow');
    current = prev;
    setHeight(current)
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
    
    $('#next').click(function(){
    var next = current + 1;
    if (next > total) next = total;
    if (current != total) {
    $('#pic' + current).fadeOut('slow');
    $('#pic' + next).fadeIn('slow');
    current = next;
    setHeight(current)
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
    
    $('#last').click(function(){
    var next  = total;
    if (current != total) {
    $('#pic' + current).fadeOut('slow');
    $('#pic' + next).fadeIn('slow');
    current = total;
    setHeight(current)
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
    
    function setHeight(current) {}}
    
    $(document).ready(function(){
        gallery();
    });
    </script>
    </body>
    </html>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    The var statement has not yet been applied to the creation of the gallery function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Like this? Ahh that works! Awesome thank you very much!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{ visibility: inherit; } The Photo Gallery</title>
    <style type="text/css">
    body{background:#ccc;}
    </style> 
    <link href="http://www.visibilityinherit.com/code/the-photo-gallery/basic-gallery.css" rel="stylesheet" type="text/css"> 
    
    </head>
    <body>
    
    <div id="gallery">
      <div id="photos">
        <b id="pic1"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/1.jpg" alt=""></b>
        <b id="pic2"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/2.jpg" alt=""></b>
        <b id="pic3"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/3.jpg" alt=""></b>
        <b id="pic4"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/4.jpg" alt=""></b>
        <b id="pic5"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/5.jpg" alt=""></b>
        <b id="pic6"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/6.jpg" alt=""></b>
        <b id="pic7"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/7.jpg" alt=""></b>
        <b id="pic8"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/8.jpg" alt=""></b>
        <b id="pic9"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/9.jpg" alt=""></b>
        <b id="pic10"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/10.jpg" alt=""></b>
        <noscript><p>You need to enable Javascript to view the Photo Gallery!</p></noscript>
      </div>
      <div id="controls">
        <a href="javascript:;" onclick="this.blur();" id="first">&lt;&lt;</a>
        <a href="javascript:;" onclick="this.blur();" id="previous">&lt;</a>
        <a id="number">1 of 10</a> 
        <a href="javascript:;" onclick="this.blur();" id="next">&gt;</a>
        <a href="javascript:;" onclick="this.blur();" id="last">&gt;&gt;</a>	
      </div>
    </div>	
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    var gallery = function() {
    var current = 1;
    var total = $('#photos b').length;
    $('#photos b').hide();
    $('#pic1').fadeIn('slow');
    $('#number').html('1 of ' + total );
    setHeight(1)
    
    $('#first').click(function(){
    var prev  = 1;
    if (current != 1) {
    $('#pic' + current).fadeOut('slow');
    setHeight(prev)
    $('#pic' + prev).fadeIn('slow');
    current = 1;
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
    
    $('#previous').click(function(){
    var prev  = current - 1;
    if (prev < 1) prev = 1;
    if (current != 1) {
    $('#pic' + current).fadeOut('slow');
    $('#pic' + prev).fadeIn('slow');
    current = prev;
    setHeight(current)
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
    
    $('#next').click(function(){
    var next = current + 1;
    if (next > total) next = total;
    if (current != total) {
    $('#pic' + current).fadeOut('slow');
    $('#pic' + next).fadeIn('slow');
    current = next;
    setHeight(current)
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
    
    $('#last').click(function(){
    var next  = total;
    if (current != total) {
    $('#pic' + current).fadeOut('slow');
    $('#pic' + next).fadeIn('slow');
    current = total;
    setHeight(current)
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
    
    function setHeight(current) {}}
    
    $(document).ready(function(){
        gallery();
    });
    </script>
    </body>
    </html>


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
  •