A little dab'll do ya
Code Snippets
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")
});
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).
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.
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.
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/