jquery imagesLoaded image by image

Question

Ive been looking at a jquery solution that listens to when each image (out of a bunch) are loaded before executing some actions (fadein etc).

With imagesLoaded I've managed to do this when ALL images are loaded, but I would want it to execute on each image once its loaded independent of the state of the others.

I think this is possible with imagesLoaded, but havent managed to get that to work. Has anyone?

Other solution?

Thanks all for great suggestions. I went with using imagesLoaded in a loop for each image for now. — John Anderson, Feb 06 '13 at 15:51

score 5 · Answer 1 · answered Aug 09 '13 at 07:31

5

Listen to the imagesLoaded progress event.

(https://github.com/desandro/imagesloaded)

imagesLoaded("img").on("progress", function(imagesLoadedInstance, image) {
    // Code for each image
});

answered Aug 09 '13 at 07:31

Johan Sundén

447
4
9

thanks for the hint, I completed your answer a bit here: http://stackoverflow.com/a/25959401/2112538 – François Romain Sep 21 '14 at 18:50

score 0 · Answer 2 · answered Jan 27 '13 at 21:15

0

You can attach a function directly to the DOM like: <img onload="executeThisImage(imgId);" /> ?

Or you can bind the load directly to it with jQuery like mipe34 suggests:

$("#myImage").load(function() { ... });

answered Jan 27 '13 at 21:15

fmsf

33,514
48
140
190

score 0 · Answer 3 · edited May 23 '17 at 12:21

Try this using jQuery:

$("#myImage").bind("load", function () { $(this).fadeIn(); });

or the same with different syntax:

$("#myImage").load(function(event) {
    $(this).fadeIn();
});

Also check this interesting topics on SO:

The second one is really interesting one. There is a solution how to make it working even when the image is cached by the browser.

Following the best answer on this topic. I see the best solution like:

$("#myImage").one('load', function() {
  $(this).fadeIn();
}).each(function() {
  if(this.complete) $(this).load();
});

Here is used one for event binding to assure that event handler is executed at most once. The each loop will assure that if image is cached it will fire the load event on it.

`.on()` has been the [preferred method of attaching events since 1.7](http://api.jquery.com/on/). — thordarson, Jan 27 '13 at 21:21

score 0 · Answer 4 · answered Jan 27 '13 at 21:17

You could use jQuery load event for that:

$("img").load(function(event) {
    console.log(this);
});

It might be good idea to limit the code to some specific set of images. For example using a class:

$("img.foo").load(function(event) {
    console.log(this);
});

score 0 · Answer 5 · answered Jan 27 '13 at 21:32

0

For this to work, you first need to hide the image:

$('img').css('display', 'none');

Then fade it in when the load event fires:

$('img').load(function(){
    $(this).fadeIn();
});

answered Jan 27 '13 at 21:32

thordarson

4,684
2
15
35

jquery imagesLoaded image by image

5 Answers5