Sequentially loading images erratic

JavaScript
1

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.


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

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

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

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.

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

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


<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

That doesn’t sound as if it will work :frowning:
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:

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

Or, maybe something like this is worth looking into: http://wordpress.org/plugins/lazy-load/

8

Thanks again for your help Pullo, I’ll look into these