在IE中,如果新建一个image对象,然后添加onload事件加载一个GIF动画图片时,onload执行方法会重复执行,而在除IE外的浏览器就没有这个问题。
<
script type
=
"
text/javascript
"
>
var img = new Image();
img.src = " test.gif " ;
img.onload = function (){
alert( " 这里会重复弹出! " );
}
< / script>
var img = new Image();
img.src = " test.gif " ;
img.onload = function (){
alert( " 这里会重复弹出! " );
}
< / script>
经过研究发现,出现这种原因是因为GIF动画里有多个帧,每个帧都会触发一次onload事件,所以会一直执行onload的方法,知道了病因解决起来就简单了。
<
script type
=
"
text/javascript
"
>
var img = new Image();
img.src = " test.gif " ;
img.onload = function (){
alert( " 加载完成,只弹一次 " );
img.onload = null ; // 关键点就是这了
}
< / script>
var img = new Image();
img.src = " test.gif " ;
img.onload = function (){
alert( " 加载完成,只弹一次 " );
img.onload = null ; // 关键点就是这了
}
< / script>
加载完成后要把onload事件赋为null,这样img动画到下一帧时就没有onload事件可触发了。