Image onLoad Event + JavaScript Issue with Internet Explorer
I was recently coding an application that would inject an image into the page and then execute a given function when the image's onLoad event fires. My code was working everywhere except Internet Explorer. That wasn't all together shocking initially but the fact that even IE8 was failing to the fire the onLoad event was discouraging. Here's what my code looked like:
var img = new Element('img',{
alt: this.title ? this.title.get('html') : this.options.url,
src: this.options.url,
events: {
error: function() {
this.messageBox.set('html',this.options.errorMessage);
img.dispose();
}.bind(this),
load: function() {
img.setStyle('display','');
this.unfade();
if(!this.footer) {
img.setStyle('cursor','pointer').addEvent('click',this.close.bind(this));
}
}.bind(this)
},
styles: {
display: 'none'
}
}).inject(this.messageBox);
On a hunch I detached the "src" assignment and coded that as a separate statement:
var img = new Element('img',{
alt: this.title ? this.title.get('html') : this.options.url,
events: {
error: function() {
this.messageBox.set('html',this.options.errorMessage);
img.dispose();
}.bind(this),
load: function() {
img.setStyle('display','');
this.unfade();
if(!this.footer) {
img.setStyle('cursor','pointer').addEvent('click',this.close.bind(this));
}
}.bind(this)
},
styles: {
display: 'none'
}
});
img.set('src',this.options.url).inject(this.messageBox); //for ie
Not too surprisingly that worked. The reason my modification worked is that image was being pulled from cache as soon as the SRC attribute was set, thus "beating" the event assignment to the punch. Keep this in mind if you run into onLoad issues with your images.
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
I ran into that issue a couple years ago when I made an image viewer script like Lightbox. It was very annoying and hard to pin down, but eventually figured out I needed to make sure the src attribute was the last thing I assigned to the new image.
Great pick up! I ran into this issue (not knowing until now) just last week, I moved on to another project but I am now going to go back and revisit that code.
Thanks!
@Kendall: Yep, I’m upgrading a lightbox.
For this example it would add more code, but you can check if a img element has been loaded by its “complete” attribute.
if(img.complete) imgLoaded();
else img.addEvent('load', imgLoaded);
IE is plain crazy sometimes… ok, ALL the time!
Brilliant work, I had the same issue some time ago.
I had the same issue lately, I added a dynamic parameter to the image src like
path/to/img.jpg+ “?” + new Date().getTime();
This makes sure it doesn’t take the image from cache since it has a new parameter value each time.
Your solution solves the problem with a much clearer and more efficient way.
Thank
@Adardesign: That’s not a terrible solution but you’re preventing caching instead of modifying your code. Not a good trade off.
There is nothing IE-related or even remotely surprising about this. You need to be aware of the fact that JS can be multi-threaded, and that all requests for external resources are asynchronous (non-blocking). By setting the src property you are in effect spawning a new thread to go get that image, and attempting to set handlers or write inline code around a thread that is already running is just asking for trouble.
You wouldn’t try to set event handlers on an XmlHttpRequest after calling send() would you? The principal is exactly the same.