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.
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.
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!
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”.
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);
})
});
}”
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!
Thanks mark, the random param worked like a charm!
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.
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?
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.
Thanks, it helps me a lot as I had the same problem!
Mark c, thanks for that. seems to have worked. Saved me a lot of time and suffering dealing with another IE issue!
Marc C you are a legend!
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.
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!
great tip. mark c, thanks
Thanks that random parameter does the trick nicely.
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.
+1 post
-1 IE
Darsain is right, his is the right way to do it.
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!
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));
}
}
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!
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.
thanx! you save me a lot of time!
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 : )
Thanks a lot – saved me heaps of time trying to get around the caching issue with this one.
Thanks a lot mark.. Saved my day.. it worked like a charm…
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.
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~~
By the way,ths new Date().getTime() not a perfect answer,because it make much HTTP-link.
Thank you, your solution of add the src after attach the “load” works perfectly, and keeps cache working!