onload事件

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:

我最近正在编写一个应用程序，该应用程序将图像插入页面，然后在图像的onLoad事件触发时执行给定的功能。 我的代码在Internet Explorer 以外的所有地方都可以使用 。 最初这并没有使所有人震惊，但是即使IE8也无法触发onLoad事件，这一事实令人沮丧。 这是我的代码：

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:

凭直觉，我分​​离了“ src”赋值并将其编码为单独的语句：

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.

这样做并不奇怪。 我的修改起作用的原因是，一旦设置了SRC属性，就会从缓存中拉出图像，从而将事件分配“打”到打Kong器。 如果图像遇到onLoad问题，请记住这一点。

翻译自: https://davidwalsh.name/image-load-event

onload事件