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();

    });