解决IE浏览器中图片onload事件失效问题

IE浏览器图片onload事件失效问题

在Web开发过程中，获取图片的宽高是常见需求。由于图片在加载完成前无法获取其实际尺寸，必须在加载完成后才能读取图片本身的宽高属性。例如：

var img = new Image();
img.src = "loading.gif";
img.onload = function(){
alert ( img.width );
};

问题原因与解决方案

这段代码看似没有问题，但在IE浏览器中会存在一个Bug。首次打开页面时正常，但第二次使用该方法时会出现问题，IE浏览器无反应，即使刷新页面也是如此。这是因为IE会缓存图片，第二次加载的图片并非从服务器下载，而是直接从缓冲区读取。先编写onload方法，再指定图片URL即可恢复正常。因此，并非IE未触发onload事件，而是从缓冲区加载的速度过快，导致在运行到img.onload之前，onload事件已经触发。这样处理即可解决问题。

var img = new Image();
img.onload = function(){
alert ( img.width );
};
img.src = "loading.gif";