SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sequentially loading images erratic

    Hi all

    jsfiddle here - http://jsfiddle.net/bM2Rp/

    Demo here - http://www.ttmt.org.uk/load/

    I'm trying to sequentially load images using imagesLoaded.js to check when the image is loaded before loading the next.

    My problem is the first time the page load there is a long delay before the first image loads and then the remaining images can load erratically.

    Loading the page again the images load as expected.

    I realise the images have to download but they're not big.

    Is there something wrong with my code that is causing this.


    Code:
    $(function() {
    
        	var i=0;
    
          var checkLoad = function(){
        		lis = $(' li img');
        		img = lis.eq(i);
        		img.imagesLoaded(function(){
        			img.fadeIn(200);
    
        			if(i<lis.length){
        				i++;
        				var timer = setTimeout(function(){
        						checkLoad();
        				}, 100)
        			}	
            });
          }
    
        	checkLoad();
    
        });

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    I just want to understand what you are trying to do.
    You want to wait until all of the images on the page have loaded, then fade them in one by one.
    Is that correct?

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Pullo

    I wanted the page to open and the images then fade in one at a time.

    From your question I'm thinking though - do all the images have to load before they start to fade in, is that why there is a delay at the start.

    I wanted the page to open, the first image to load quickly(within a reasonable time), wait a second then the next image fade in, and so on.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I found the following script on the jQuery forums and adapted it to suit your needs.
    It takes an array of images, loads them sequentially, appendis them to your <ul> element and fades them in.
    This should be more like what you want.

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <base href="http://www.ttmt.org.uk/load/images/" />
        <meta charset="UTF-8">
        <title>Title of the document</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="robots" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
      </head>
      
      <body>
        <div id="wrap">
          <ul id="images"></ul>
        </div><!-- #wrap -->
        
        
        <script>
          $(function() {
            function loadImages(arr) {
              if (arr.length !== 0) {
                loadImage(arr);
              }
            }
            
            function imageLoaded(img) {
              var li = $("<li></li>").append(img);;
              $(li).hide().appendTo($("#images")).fadeIn();
            }
          
            function loadImage(arr) {
              var url = arr.shift(),
              img = new Image(),
              timer;
              
              img.src = url;
              if (img.complete || img.readyState === 4) {
                imageLoaded(img);
                if (arr.length !== 0) {
                  loadImage(arr);
                }
              } else {
                // handle 404 using setTimeout set at 10 seconds, adjust as needed
                timer = setTimeout(function() {
                  if (arr.length !== 0) {
                    loadImage(arr);
                  }
                  $(img).unbind("error load onreadystate");
                }, 10000);
                $(img).bind("error load onreadystatechange", function(e) {
                  clearTimeout(timer);
                  if (e.type !== "error") {
                    imageLoaded(img);
                  }
                  if (arr.length !== 0) {
                    loadImage(arr);
                  }
                });
              }
            }
            
            var imgArr = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg"];
            loadImages(imgArr);
          });  	
        </script>
      </body>
    </html>

  5. #5
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo, I had actually seen that script but thought I could still work with mine.

    I'm actually working with a gallery in Wordpress so the code looks like this - I have removed links to shorten code

    Code:
    <ul>
    				
    	<li class="home_Sites_img"><a href="" ><img width="500" height="334" src="" class="attachment-post-thumbnail wp-post-image"  /></a></li>
    	
    	<li class="home_Sites_img"><a href="" ><img width="500" height="334" src="" class="attachment-post-thumbnail wp-post-image"  /></a></li>
    	
    	<li class="home_Sites_img"><a href="" ><img width="500" height="334" src="" class="attachment-post-thumbnail wp-post-image"  /></a></li>
    	
    	<li class="home_Sites_img"><a href="" ><img width="500" height="334" src="" class="attachment-post-thumbnail wp-post-image"  /></a></li>
    	
    	<li class="home_Sites_img"><a href="" ><img width="500" height="334" src="" class="attachment-post-thumbnail wp-post-image"  /></a></li>
    	
    </ul>
    Could I use that code if I added the whole <li> to the array then faded in the images.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by ttmt View Post
    Could I use that code if I added the whole <li> to the array then faded in the images.
    That doesn't sound as if it will work
    The code I posted needs a reference to an image (not a blob of HTML), so that it can load it.

    What you might try is creating a object with the appropriate info:

    Code JavaScript:
    var imgData= {
      image1: {src: "...", href: "..."},
      image2: {src: "...", href: "..."},
      ...
    }

    That way you can loop through the images, load them using the src, then set the link accordingly using the href value.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Or, maybe something like this is worth looking into: http://wordpress.org/plugins/lazy-load/

  8. #8
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for your help Pullo, I'll look into these


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
  •