IE处理GIF动画图片onload事件的一个BUG

在IE中，如果新建一个image对象，然后添加onload事件加载一个GIF动画图片时，onload执行方法会重复执行，而在除IE外的浏览器就没有这个问题。

 

 
   < 
   script type 
   = 
   " 
   text/javascript 
   " 
   > 
   
 
   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> 
  

 

加载完成后要把onload事件赋为null，这样img动画到下一帧时就没有onload事件可触发了。