How to check if images are uploaded using Javascript?

In the handler of OnLoadmy webpage, I am trying to check if all the images are loaded correctly.

I repeat all the tags <img>and test them using my function isImageLoaded(). Unfortunately, my function only works with Firefox and IE up to version 8.

Any suggestions how can I 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 ok
    return true;
}

Update: It turned out that the main culprit is that OnLoad can be launched before all images load IE9 +. What would be the best trigger for checking images on a page? I would rather check them all at once, rather than with separate OnLoad / OnError handlers.

+5
source share
1

OnLoad - , .

, body.onload <body onload="">? , -— , :

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

IE:

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

, , window.onload , ( , javascript css). :

window.onload vs < body onload = "/ >

, , , onload . , , , , dom ready, , kennypu:

, , image.complete :

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

+1

All Articles