One big problem with using load() on images is that it just does not work at all on IE. Now there is a lot of solutions proposed to counter this problem but unfortunately most of them are irritating.

Why IE handle load() this way

Simple, IE already cached your image, why should it need to load it back? The 2 most know solution to this are 1, adding a random string at the end of the image url, like this:

myImge = $("<img />")
   .attr("src",anyDynamicSource+ "?" + new Date().getTime());

The other solution is to check the height property since if it’s not zero, the image is already loaded:

$('img').each(function() {
    if ($(this).height() > 0) {
       our callback
    } else {
       $(this).load(function() {
         our callback

Well these 2 solutions work, but they are not really nice. In fact this problem can be solved in a much better way.

Use load() first

Yup. That’s it, when you create your image in javascript, before doing anything else use your load function and IE will behave like all the other browsers.

     // do stuff

5 thoughts on “Working with jQuery load() function on images in Internet Explorer 8 and below

  1. Thank you for this post, I’m a webdeveloper and I really like I have to develop everything 2 times:
    first time for every good browser
    second time for every IE ­čÖé

  2. $(“”).load(function(){
    // do stuff

    this don’t work in ie

Comments are closed.