Question

In Chrome, Firefox, and Safari, I’m successfully using onError to remove images that didn’t load:

<img src="" onerror="jQuery(this).remove();" />

This doesn’t seem to work in Internet Explorer 9, but the second+ refresh of the page works fine and exactly like the other browsers. Is there a better way to remove img tags from the dom that didn’t load correctly in IE? It almost seems like IE is indefinitely waiting for images to load on the first page load?

Answer 1

I suspect that the error is being returned from the image before jQuery has loaded. This would cause the onerror handler to fire, but it would then fail.

This doesn’t really need to be done with jQuery at all; you could use a regular Javascript to deal with it. Something like this should do the trick:

this.parentNode.removeChild(this);

That would be a direct replacement for the jQuery code you currently have. A similar amount of code and removes the need for jQuery, so removes any possible problem caused by loading sequence.

It’s also worth pointing out that one of jQuery’s main reasons for existing is to help us get rid of the need for JS code embedded in the HTML like this, so seeing a jQuery call inside an HTML event like as per your original example just looks wrong.

If you are going to use jQuery for this, don’t do it that that; use jquery’s proper event handling mechanisms. It would look like this:

jQuery('img').error(function() {
    jQuery(this).remove();
});

This would be in a separate script tag, outside of your HTML.

However, due to the issues of loading sequence, and the fact that your image loading errors will occur very early in the page load, I would suggest just going with the first solution. The jQuery solution might be more worthwhile if you have images loading dynamically after the main page load though.

Hope that helps.