JavaScript 获取图片宽高：解决 Chrome 与 IE 缓存导致 onload 失效问题

JavaScript 获取图片宽高的基本方法

通常获取图片高度和宽度的写法如下所示：

var img = new Image();
img.src = imgsrc;
var imgWH = CalcImgTiple(img.width, img.height);

Chrome 浏览器中获取图片尺寸失败的原因

但在 Chrome 浏览器中进行测试时，发现无法成功获取到图片尺寸，img.width 和 img.height 的值均为 0。

原因分析：当图片并非本地文件，而是通过网络加载时，需要关注 onload 事件。onload 是在图像成功加载完成时调用的事件处理程序。

IE 浏览器中 onload 事件未触发的解决方案

在进行 Web 开发时，有一个需求是使用 JavaScript 获取即将加载的图片尺寸。因此，很自然地想到了使用 img 的 onload 方法。在 Firefox 下开发完成后，切换到 IE 浏览器进行调试，发现 img 的 onload 事件在很多情况下并没有被调用。

最初的代码如下：

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

这段代码表面上看起来没有问题，但为什么在 IE 中 onload 没有被调用呢？这是因为 IE 浏览器会缓存图片。第二次加载的图片不是从服务器重新获取，而是直接从缓冲区加载的。那么，从缓冲区加载的图片是否就不触发 onload 事件呢？于是，我测试了以下代码，结果成功了：

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

关键在于将 onload 绑定代码写在前面，先告诉浏览器如何处理这张图片，然后再指定图片的源地址，这样就能正常运行了。因此，并不是 IE 没有触发 onload 事件，而是因为从缓冲区加载图片的速度太快，以至于在代码运行到 img.onload 之前，onload 事件就已经触发了。这让人联想到 Ajax 开发，在编写 xmlhttp 时，都是先指定 onreadystatechange 的回调函数，然后再发送数据，道理是相同的。

以上所述就是本文的全部内容了，希望大家能够喜欢。