What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » jQuery » Fixing .load() in IE for cached images

Fixing .load() in IE for cached images

The .load() function fires when the element it's called upon is fully loaded. It is commonly used on images, which may not be fully loaded when the JavaScript originally runs, and thus would return incorrect information about themselves (e.g. height/width). Most browsers deal with this fine. IE can cause problems, when images on the page are cached.

Selecting the image and changing it's src attribute to append a random parameter (based on the date). This will trick IE into firing the .load() function properly.

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

Now the .load() function will work, even in IE:

$(myImge).load(function() {
   alert("will alert even in IE")
});

Subscribe to The Thread

  1. John Jimenez

    This method can really hurt some cdn servers. By calling the image with ‘?[whatever randomness you want]‘ you are creating a copy of that file that propagates through the server farm with that extra randomness as the file name.

    someImg.jpg -> someImg.jpg gets propagated to the cdn.
    someImg.jpg?20100318000302 -> someImg.jpg?20100318000302 gets propagated to the cdn.
    someImg.jpg?20100318000303 -> someImg.jpg?20100318000303 gets propagated to the cdn.

    On smaller sites that don’t use cdn this may be a fine method, but it is not a viable option for higher end sites (CNN.com, PGATOUR.com, NBA.com, etc).

    Reply ↓
    • Eliazer

      Thanks, Which solution would you suggest in such a case?

      Thanks again.

    • John Jimenez

      Sorry Eliazer, I still do not have a solution for this case.
      I was just making it a point to bring it up as my team got dinged pretty hard for doing this type of method, and I wanted to help others avoid it if possible.

  2. Justin

    jQuery 1.4.2 already does this for you (using the $.ajax() function however). Just put cache : false to the AJAX setup and it should do it for you.

    Reply ↓
    • TeMc

      This has nothing to do with AJAX requests, it’s about normal img-tags and firing a function when the image is loaded (ie. [img onload=this-function /]), and not about $(target).load(‘http address’, function(){}); which is something totally different.

      jQuery has several functions with equal names, and depending on the context something may mean something different.

      such as click() means trigger the click event, but click(function(){ }), means bind a click handler.

      See also
      http://api.jquery.com/load/
      http://api.jquery.com/load-event/

  3. ben

    Thanks for this. I think I will take a slightly different approach in my case. The problem with doing it this way is that you loose all the benefits of image caching in all other browsers and I don’t want to reduce everyone elses experience just because of IE7.

    Instead I am going to leave the .load function there but also have a setTimeout function that will do the same as the load (since in my case it’s only removing a class it’s not a problem). I am sure there’s a better way though. Anyone?

    Reply ↓
  4. ben

    Oh, I found the answer here:

    http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/

    see comment-4731

    Reply ↓
  5. nme

    as John Jimenez mentioned, given method will increase CDN hit ratio, there is an easier method to accomplish this, heres pseudo code:

    $('img').each(function() {
    if ($(this).height() > 0) {
       our callback
    } else {
       $(this).load(function() {
         our callback
       });
    }
});
    Reply ↓
  6. Bhanu Pratap

    Thanks. Now it is working in all browsers great.

    var url = any dynamic url;
    var img = new Image();
    $(“<img/>”) // Make in memory copy of image to avoid css issues
    .attr(“src”, url+ “?” + new Date().getTime())
    .load(function() {
    // Do any stuff
    });

    Reply ↓
  7. Adam Wadsworth

    I have the same problem but not sure where to start fixing it. Could someone please spend two mins and have a quick look at this problem.
    URL: http://www.media21a.co.uk/development/unknown/

    Any/All help will be credited thank you.

    Reply ↓
  8. Miro Hristov

    Here is a one line solution that you can use insted of $(‘img’).load(function(){ //// });

    
$('img').each(function(){  this.src = this.src + '?random=' + (new Date()).getTime()}).load(function(){
 alert("will alert even in IE")
});
    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~