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事件可触发了。