2009
29
May

Image Load Event Binding With IE Using jQuery

I ran into a strange issue today. I wrote a plugin for jQuery that used the load events from jQuery attached to an image. This plugin worked perfectly in Firefox, Safari, and Opera on PC, Mac, and Ubuntu. The only browser that it had problems with was IE.

I know. Completely unheard of right? I mean Internet Explorer is the best browser ever. Everything works perfectly in IE. (In case you didn’t catch that, that was sarcasm)

What the plugin was doing was creating an image element and adding it to the DOM. Once the image was added to the DOM I added the load event to it. The problem was that IE would only see the load event maybe 10% of the time at best. The only way I could get it to work in IE was add the image element to the DOM but don’t give it a src. Once the image element was added to the DOM, I created the load event listener. Once the load even was created, then I went back to the image and gave it an src.

This was an issue only on images with a smaller file size. The larger images didn’t seem to have as big of an issue with it except when I was testing locally. However, even the larger images weren’t consistently calling the load event.

Hopefully this helps out someone else. This drove me nuts for about an hour.

32 Responses to Image Load Event Binding With IE Using jQuery

  1. Doug Waltman says:

    I think the reason the load event does not always fire in IE, is due to image caching. I am experiencing the same issue, and only on small images that have already been loaded, or loaded before the bind event was fired in JavaScript.

  2. Simone says:

    Hi! I have the same problem…

    So, If I have a code like this:

    imgPre.src = “image/path/name.jpg”;
    $(imgPre).unbind().bind(‘load’, function() {

    I’ve to put inside the “load” event the .src assignment. Is it right?

    Please help me!!!this fuc**** IE7 it’s drive me crazy!

  3. Binding load events in IE is always fun. I don’t have the code in front of me but I remember it was something similar to the following:

    var myImg = $(“”).attr({src: “/folder/image.jpg”}).bind(“load”, function(){ alert(‘loaded’) });
    $(“body”).append(myImg);

    Basically what this is doing is it is creating an image element and adding the load bind event to the image. The next line we add the image to the DOM. This takes care of giving it an src and binding the event before it gets added to the DOM. If it works then it should alert “loaded”.

  4. mark c says:

    I found a quick fix for this, since it is a caching issue with IE that is causing this problem adding a random query onto the URL will trick IE into reloading the image and calling the load function

    here is my code to load an image, while waiting show a loading icon, but when the load is completed fade the new image in to view (works in Drupal 6.x) you can easily customize it for your needs

    function setImage(src){
    var loadingImg = $(”).attr(‘src’, Drupal.settings.basePath + ‘sites/all/modules/custom/dcats/images/ajax-loader.gif’);
    $(‘#image-container’).html(loadingImg);
    var img = $(”).attr({src: src + ‘?random=’ + (new Date()).getTime()}).load(function (){
    $(‘#image-container’).fadeOut(‘fast’, function(){
    var newData = $(‘#image-container’).html(img).fadeIn();
    Drupal.attachBehaviors(newData);
    })
    });
    }”

  5. Dave says:

    Thank you Mark c! The random new Date() (var img = $(”).attr({src: src + ‘?random=’ + (new Date()).getTime()}).load(function (){ ) works great for me. You save my life!

  6. mojo says:

    Thanks mark, the random param worked like a charm! :D

  7. Oli says:

    I can see that that works but it could potentally cause an increased load on the server. Is there any reciognised way or creating a multiple image preloader that will fire an event on completion that will sucessfully work in ff and ie?

    Cheers.

  8. baneizalfe says:

    Hi, I already tried with inserting random url to prevent image from being cached. That fixed the problem with Firefox. But now IE shows image even if it is not comletly loaded! It’s like load complete event fires on it’s own. Weird?

  9. Anoop says:

    I have spend my 5 days becuase of IE& not calling the callback function after image load. Then i have just use the code var img = $(”).attr({src: src + ‘?random=’ + (new Date()).getTime()}).load(function (){ myfunction(); });, it is completly working now.

  10. julien says:

    Thanks, it helps me a lot as I had the same problem!

  11. Martin says:

    Mark c, thanks for that. seems to have worked. Saved me a lot of time and suffering dealing with another IE issue!

  12. Morgan says:

    Marc C you are a legend!

  13. Talal says:

    I’ve been stuck with this ie6 bug for a while, my code was replacing an image source attribute whenever an anchor is clicked. the image had a .load event to fadeIn when loading is complete, but ie6 never triggered this event.
    I noticed that if i try to display the image from within the code without interacting with the page the image .load event was triggered but when i clicked on the anchor nothing happened.

    so my solution was to replace the .click event on the anchor with a .mousedown event
    and everything started to execute correctly.

    it seems that when interacting with the page and then ceasing this interaction the browser would never have time to process the events for the .load event, so the .mousedown action was a logical replacement since you are still considered in interaction with the page before you lift off your finger.

    Hope this is helpful.

  14. Phil says:

    I just spent a few hours debugging this very issue with IE and cached images. With your solution I was able to fix it. Thanks!

  15. umit says:

    great tip. mark c, thanks

  16. Amy says:

    Thanks that random parameter does the trick nicely.

  17. Darsain says:

    You guys can’t just remove caching! Caching is good. There is a reason why it is there – it lowers your server load, and the user experience is faster. Why don’t you just use the advice given in article? Add the src attribute AFTER you’ve added the load event, and it works flawlessly… You don’t even have to insert it into the DOM beforehand.

  18. DanLinn says:

    +1 post
    -1 IE

  19. ben says:

    Darsain is right, his is the right way to do it.

  20. z4kko says:

    Great solution! Works perfectly in IE from 7 to 9! Not working on FF and Chrome, but is resolved by checking the browser type with $.browser.msie…Thank you!

  21. ian says:

    To solve the problem across all browsers I just checked to see if the height property existed for the image before trying to load…
    var img = $(“#idofyourimage”);
    if(img.height()){
    processImgFunction(img);
    }else{
    img.load(function(){
    processImgFunction($(this));
    }
    }

  22. Jared says:

    Great read! I was stumped as to why the jQuery.load event was not firing on my image in IE, and this was an easy and effective fix. Cheers!

  23. Michael says:

    Thanks, Ian! The other solutions work if you are adding the image with JS, but my image is loaded in the original HTML. This worked great.

  24. jp says:

    thanx! you save me a lot of time!

  25. I’ve got the same problem I think, The montage script isn’t adding working because the images are using the .Load function. I really hate IE would someone please take two mins to have a look and double check that the problem is here is the link http://www.media21a.co.uk/development/unknown/ any help on this would be great : )

  26. Rob says:

    Thanks a lot – saved me heaps of time trying to get around the caching issue with this one.

  27. Amjath says:

    Thanks a lot mark.. Saved my day.. it worked like a charm…

  28. Whitney says:

    With jQuery 1.7.1
    $(‘img’)
    .on(‘load’, function(e) { … })
    .each(function(i,e) { $(e).attr(‘src’, $(e).attr(‘src’)); });

    This allows you to assign the src attribute for all your images normally.

  29. houbiao says:

    Hey guys.I have the same problem to you,but there is a very perfect answer,share for you!
    $(“img.lazy-load-ed”).one(“load”,function(){
    //do something
    }).each(function(){
    if(this.complete){ $(this).load(); }
    });
    try it and welcome to my site!I’m a chinese~~

  30. houbiao says:

    By the way,ths new Date().getTime() not a perfect answer,because it make much HTTP-link.

  31. dodger says:

    Thank you, your solution of add the src after attach the “load” works perfectly, and keeps cache working!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>