Nov
9

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

By Cedric Dugas // Article small archives, Articles, Javascript / jQuery // 3 Comments

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, however most of them are irritating.

Why IE handle load() this way

Simple, IE already cached your image, so it does not need to load it back The 2 most know solution to this are one, 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 a lot easier.

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.

$("<img>").load(function(){
// do stuff
}).attr({
"id":"imgInsert",
"src":response.url,
"alt":response.alt
);

Author: Cedric Dugas

Cedric Dugas is an experienced front-end developer and founder of Position: Absolute, based in Montreal, Canada. When he is not doing CSS and jquery (does it ever happen?), he likes to read on web usability and play trumpet. Why don't you follow him on twitter.

3 Comments to “Working with jQuery load() function on images in Internet Explorer 8 and below”

Blaise Kal November 11, 2011 at 11:03 am

You should use this.complete or $(this).prop(‘complete’) instead of height(). It’s meant specifically for this purpose.

Reply
Alex January 16, 2012 at 5:47 am

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

Reply
Wondernanne February 6, 2012 at 4:36 am

Thanks a lot, it’s work fine !!!!!!!!!!

Reply