jQuery Check if Image Loaded after append

Question

I have a function I created that runs initially on window load to do some processing to images (height width etc.) - For the sake of this question i'll call that function "run_imgprocess()"

My question:

When appending data to the page with a click function (or ajax etc.) I need to call the "run_imgprocess()" function on the images once they are loaded but that is the tricky part.

Without using something like the "imagesloaded" plugin, what are my options?

My last attempt was this:

$(".appendedclass img").load(function(){
    run_imgprocess();
});

However this is not reliable once you use more than a few large images in your click append.

Thank you in advance!

EDIT :

Added Fiddle - http://jsfiddle.net/aECag/1/

IMPOTANT : When you cache the images, they will render properly on re-run. You have to clear your browser cache completely then try.

Have you seen the one/each method: http://stackoverflow.com/a/2392448/1414562 — A. Wolff, May 03 '13 at 13:51

score 0 · Answer 1 · answered May 03 '13 at 13:53

0

Without the full code I can't really test or set up a jsfiddle for you. Maybe try this below:

$('.appendedclass img').each(function() {
    $(this).load(function() {
      run_imgprocess();
    });
 });

answered May 03 '13 at 13:53

Jon Harding

4,928
13
51
96

Just gave this a try but it's still having issues with not being loaded when the function calls. – amazedinc May 03 '13 at 14:01
2

I'd suggest creating a jsfiddle so we can see what's happening – Jon Harding May 03 '13 at 14:03

score 0 · Answer 2 · answered May 03 '13 at 23:31

You might want to drop down to the js native onload:

$(".hhImageBox:not(.processed) img").each(function(){
    this.onload = function() {
        run_imgprocess();
    }
});

I tried it on your jsfiddle and it seemed to work pretty well.

The reason is that the jQuery load() function is more designed for loading HTML, whereas the onload event of an image won't fire until the image is fully downloaded.

score 0 · Answer 3 · answered Apr 26 '14 at 13:51

I had the same problem. In my case, my code appends to a div some images contained in an Array. So basically the number of images is equal to Array.lenght. So, applied to your case it could be:

var imagesLoaded = 0;
$(".appendedclass img").load(function(){
    imagesLoaded++;
    if (imagesLoaded == imagesLinks.length) {
        run_imgprocess();
    }
});

where imagesLinks is my array containing my images

jQuery Check if Image Loaded after append

3 Answers3