imagesloaded() sometimes called too soon + lack of check if image is loaded

[desandro]

imagesloaded() sometimes called too soon + lack of check if image is loaded

[darsain]

There was an issue with recently added even caching feature, which did not take into account changed src, so it reported images with new src as already loaded. Should be fixed, but please test it just to be sure :)

[lmeurs]

Unfortunately the fix does not work for my demo. imagesloaded() gets fired, but still too soon: when reading the width of the image, it returns the width of the previous image. The timed out check prints out the right width. I uploaded the new jquery.imagesloaded.js, check it at http://www.wishdesign.nl/fora/imagesloaded/problem.htm.

My solution with replacing the actual image for a clone seems to solve this, but has a big disadvantage: the old image gets removed, a new one gets inserted. So any jQuery collections made earlier contain a reference to the old image... imagesloaded() could return the new image elements, but this is not ideal.

[darsain]

After looking at your demo, of course it gets fired too soon :) It seems that you've misunderstood the imagesLoaded functionality. ImagesLoaded checks whether every image in current stack at current time has finished loading, and if it does, it triggers a callback (and resolves deferred object). If it doesn't, it waits for it to finish, and than fires callback (and resolves dfd).

What you are doing, is that you are checking whether an image has finished loading BEFORE you change its src. Obviously the code in callback can't return the new width, because it is called before you've even changed the src :)

In other words, imagesLoaded is called on an image with old src, which is already loaded, thus it immediately fires callback, and THAN you change its src :)

Quick fix for you:

// Current wrong usage
$img.imagesLoaded( fn ).attr('src' , (nr=nr==1?2:1) + '.jpg');

// Fixed
$img.attr('src' , (nr=nr==1?2:1) + '.jpg').imagesLoaded( fn );

[lmeurs]

You are so right! My initial code was in the right order, then I ran into the "event caching was ignoring changed img.src" problem (solved by fix at 695f896) and built a test page with the wrong order. I guess I treated imagesloaded() as an event: I wanted to attach it before the source change to be sure the image could not get loaded without the 'event'.

As proof I posted the initial demo, with your fixed jquery.imagesloaded.js and the right order at: http://www.wishdesign.nl/fora/imagesloaded/problema.htm. Works like a charm! :-) Thanks a lot for the effort!

Cheers from the Netherlands