jQuery: check if image has loaded - sequential image load

Question

I have a demo here - http://www.ttmt.org.uk/forum/gallery

And jsfiddle to illustrate my question - http://jsfiddle.net/ttmt/tmyqj/6/

It's just a simple list of images that are floated right off the page.

I would like to load the images sequentially from left to right.

I have done it with this:

    $(document).ready(function() {
      var lis = $('li').hide();

      var i=0;   

      function displayImg(){
        lis.eq(i++).fadeIn(200, displayImg);
      } 

      displayImg();    

    })

This code works, but I would like to load one image at a time, so I need to check if an image has loaded before loading the next one.

I tried with this but it only loads the very first image.

    $(document).ready(function() {
        var lis = $('li').hide();

        var i=0;   

        function displayImg(){
          lis.eq(i).fadeIn(200, checkLoad);
        } 

        function checkLoad(){
          if(lis.eq(i).complete){
            i++;
            displayImg();
          }else{
            alert('img not load');
          }
        }

        displayImg();    

      })

How can I check if an image has loaded before loading the next image?

Barrie Reader · Accepted Answer · 2012-11-26 12:46:30Z

1

I would use (I'll let you put it in the loop!):

 objImage = new Image();
 objImage.src='images/theimage.jpg';
 objImage.onLoad = imageLoaded();

 function imagesLoaded()
 {    
     //image is loaded, append it as per usual...
 }

Obviously this will need some refining, but it should get you going ;)

EDIT
Alternatively, you can use this jQuery plugin to preload images:

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/

or

http://www.jqueryin.com/projects/spinner-jquery-preloader-plugin/#about

answered Nov 26, 2012 at 12:46

Barrie Reader

10.7k11 gold badges77 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wuron · Accepted Answer · 2012-11-26 13:02:18Z

1

$(function() { // A shortcut for $(document).ready(function() {})
  var lis = $('li').hide();

  var displayImages = function(startIndex) {
    var li = lis.eq(startIndex);
    if (li.length) {
      li.fadeIn(200, function() {
        li.find('img').load(function() {
          displayImages(startIndex + 1);
        });
      });
    }
  }

  displayImages(1);

});

answered Nov 26, 2012 at 13:02

Wuron

315 bronze badges

1 Comment

ttmt Over a year ago

Aleksandr your code isn't working for me, it just loads the first image.

Collectives™ on Stack Overflow

jQuery: check if image has loaded - sequential image load

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related