How to Fix the IE9 Image Onload Bug

In case you are unaware: In JavaScript, there is a simple way to react to images being loaded, called the onload event. You frequently need this when working with <canvas>, or when you need the dimensions of an image for positioning, scaling etc.

In jQuery, using this is very simple:

$("img").on("load", function() {
// do something
});

The problem with this is that Internet Explorer 9 has an annoying bug that prevents the onload event from firing for cached images. This means that your code works the first time the page is loaded, but if the user reloads it, it does not even run.

There are some solutions to this problem on the Internet, most of which have to do with appending a random string to the src attribute of the image. All of those solutions have two serious drawbacks:

The entire image has to be reloaded from the server, increasing the amount of data your users have to download.

Every time the image is requested, your server creates a copy of it in its internal cache, wasting precious space.

I have come up with a solution that does not have any of those disadvantages, and that is actually shorter and simpler than every workaround I have found. Again, in jQuery:

$("#myImage").attr("src", $("#myImage").attr("src"));

As you can see, I am only setting the image’s src attribute to the exact same value it had before. That way, the browser does not download anything. If you watch this in the IE Dev Tools’ Network panel, you can see that the image isn’t even requested:

For some reason, however, this short line of code triggers the onload event.

Edit: As someone in the comments pointed out:, under certain circumstances, this event may fire twice. Please make sure to implement this workaround in a way that handles this case, e.g. by using Underscore’s once(). Also make sure that this only runs in IE9, since this is an IE9-only workaround!

Spread the ♥:

About Author

Patrick is a software developer at Die Socialisten. He is very passionate about JavaScript, HTML5, web standards and music. Some of his colleagues call him a hipster, but it's totally not his fault that he discovers everything before it gets big! Follow him on Twitter, Facebook or on Google+!

um, worse than that even… the code as posted is completely broken if there is more than one image on the page. it sets the src of all images on the page to that of the first image on the page. more adequate code would be:
$(‘img’).each(function(){this.src=this.src})

the code a posted was not supposed to be a “copy, paste and done!” solution, but an example to show the basic principle. I used $(“img”) in my example instead of $(“#someID”) to clearly show that the selected element is an image.

It is the responsibility of every programmer to alter code examples they find on the Internet in a way that makes sense for their specific use case, and to read and understand what is happening before using code snippets.

Concerning “other browsers”: Since this is a IE9-only workaround, you should make sure it runs in this browser only.

Concerning the multiple firing of the event: Good catch! I will alter the article to mention that. I will also make the code examples a bit clearer. Thanks for your feedback!