I am aiming to check if image has been loaded successfully. It has been working well in modern browsers but IE8 or 7 it is a terrible issue. Here is a sample code:

var img = new Image(),
    url = '.gif';

    $(img).attr('src', url).load(function() {
        if (!thisplete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } 
        else {
            alert('successfully loaded');
        }
    } 

Anyone has any idea to work around with this issue? Thanks in advace!

I am aiming to check if image has been loaded successfully. It has been working well in modern browsers but IE8 or 7 it is a terrible issue. Here is a sample code:

var img = new Image(),
    url = 'http://something.com/images/something.gif';

    $(img).attr('src', url).load(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } 
        else {
            alert('successfully loaded');
        }
    } 

Anyone has any idea to work around with this issue? Thanks in advace!

• javascript
• image
• internet-explorer

3 Answers 3

You HAVE to set the onload handler BEFORE you set the .src value.

In some versions of IE, if the image is in the browser cache, the load event will be fired immediately when the .src value is set. If your load handler is not already in place, you will miss that event.

Also, naturalWidth and naturalHeight are NOT supported in older versions of IE so they will always be undefined. And, you should use onerror and onabort to catch the error conditions.

There's no need to use jQuery for this. You can just do this:

var img = new Image(),

img.onload = function() {
    alert("loaded successfully");
}
img.onerror = img.onabort = function() {
    alert("broken image");
}
// only set .src AFTER event handlers are in place
img.src = 'http://something.com/images/something.gif';

If the image is broken, then onload event won't be fired, instead, the onerror event will be fired. So you need to do like this:

var img = new Image(),
url = 'http://something.com/images/something.gif';

img.onload = function() {
  alert('successfully loaded');
};

img.onerror = function() {
  alert('broken image!');
};

$(img).attr('src', url);

Or with jQuery:

$(img).load(function() {
  alert('successfully loaded');
}).error(function() {
  alert('broken image!');
}).attr('src', url);

var url="http://something.com/images/something.gif",
    img=new Image;
img.onload=img.onerror=function(ev){
  if(ev.type=="load")alert("successfully loaded");
  else if(ev.type=="error")alert("error loading");
}
img.src=url;
// If image is cached then no `onload` or `onerror` can occur.
if(img.complete){
  alert("successfully loaded");
  img.onload=img.onerror=null;
}