IE浏览器中Image对象onload失效的解决办法

IE浏览器中Image对象onload失效的解决办法

前言：作为WEB设计者，为了在网页展示上加强用户体验，经常会利用图象载入显示状态方法，

      这自然需要Image对象的onload事件。

在firefox浏览器下完成开发后，可是在IE浏览器中进行调试总不能被调用。

不管是最新版的IE8还是旧版本的IE7和IE6都无效，最初的代码简化后如下：

   var img = new Image();

       img.src = "test.gif";

       img.onload = function(){

           alert(this.src);  //other      

       };

简单看过以后貌似这段代码没有什么问题，可是IE下就不是能正常的运行。

不管怎么检测，IE根本不会理会，不过还是找到了解决的方法，原理如下：

图片下载时，浏览器会把图片缓存起来，再次加载此图片时就会从缓冲区里加载。

那么如果图片已经在缓存区了，是不是从缓冲区里加载的图片就不触发onload事件呢？

测试……

var img = new Image();

 img.onload = function(){

     alert(this.src);     //other    

 };

img.src = "test.gif";

测试成功！

结论：应该把onload写到src前面，先告诉浏览器图片加载完要怎么处理，再让它去加载图片。

 所以，不是IE浏览器不会触发onload事件，而是因为加载缓冲区的速度太快，在没有告诉它加载完要怎么办

 时，它已经加载完了。

反过来说，firefox明显更智能一些，加入onload事件后，firefox浏览器会检测缓冲区是否已经有此图片，

有的话直接就触发此事件！