CSS-Tricks*

A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Code Snippets > jQuery > Fixing .load() in IE for cached images Submit one!

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. 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).

    • Eliazer says:

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

      Thanks again.

    • 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 says:

    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.

    • TeMc says:

      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/

It's Your Turn

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 ---