Howto check if images have loaded using Javascript?

Question

In the OnLoad handler of my webpage I'm trying to check if all images have loaded correctly.

I'm iterating over all <img> tags and check them with my isImageLoaded() function. Unfortunately my function only works with Firefox and IE up to version 8.

Any suggestions how I can get it to work in IE 9 and 10?

function isImageLoaded(img) {
    // check for IE
    if (!img.complete) {
        return false;
    }
    // check for Firefox
    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
        return false;
    }
    // assume it's ok
    return true;
}

Update: It turns out the main culprit is that OnLoad can be fired before all image are loaded by IE9+. What would be a better trigger to check the images in the page ? I would prefer to check them all at once and not with individual OnLoad / OnError handlers.

Thanks sdespont! I'my trying to avoid using a library to keep page size down. — Gene Vincent, Mar 20 '13 at 08:13
Did you try simply adding an `onload` event handler for each image and counting how many times they fire? — Ted Hopp, Mar 20 '13 at 08:14
I'm currently using the page OnLoad handler. I would assume thats only called once. Do you think IE 9 + 10 call it before the images are fully loaded ? — Gene Vincent, Mar 20 '13 at 08:15
well you can add an onload event on each image. when the event fires you can just increment a variable, lets say `imagesLoaded`. when `imagesLoaded` is the same as the amount of images on the page, all the images have been loaded. — kennypu, Mar 20 '13 at 08:20
possible duplicate of [How can I determine if an image has loaded, using Javascript/jQuery?](http://stackoverflow.com/questions/263359/how-can-i-determine-if-an-image-has-loaded-using-javascript-jquery) — Steve Tauber, Jun 28 '13 at 22:35

score 1 · Accepted Answer · edited May 23 '17 at 11:50

In the OnLoad handler of my webpage I'm trying to check if all images have loaded correctly.

I'm assuming you are using body.onload or <body onload="">? This should still mean that all images are all loaded — however, by using:

window.addEventListener('load', function(){
  /// everything in the page has loaded now
});

Or for older versions of IE:

window.attachEvent('onload', function(){
  /// everything in the page has loaded now
});

You'll get a more consistent behaviour across browsers, and I know for a fact that window.onload will only trigger once everthing has loaded (that includes all other resources like javascript and css however). This link could be interesting:

window.onload vs <body onload=""/>

So the above should make your function a little redundent, unless you are injecting images into the page after the onload event has fired. If however, you wanted to speed things up and not have to wait for everything to download you could use a dom ready listener and then implement the method mentioned by kennypu:

Cross Browser Dom Ready

Just as an added note, as far as I'm aware, image.complete should work for all modern browsers:

https://developer.mozilla.org/en-US/docs/DOM/HTMLImageElement

I was indeed using window.onload and switching to window.addEventListener made things slightly better, but still fails sometimes. This makes me believe this is indeed a timing isue when the OnLoad hander is called and IE 9 and 10 seem to call it too early... — Gene Vincent, Mar 20 '13 at 08:54
@GeneVincent if you post more of your code the StackOverflow community could help you debug exactly what is going on -- specifically your `onload` handler, but the more information the better. — Pebbl, Mar 20 '13 at 12:25

Howto check if images have loaded using Javascript?

1 Answers1