需求：获取图片的宽高其实是为了预先做好排版样式布局做准备。
可以利用图片onload事件监听获取图片的宽高属性值。在IE9以下版本只能使用图片的width与height属性，HTMl5中新加入了naturalHeight与naturalWidth属性，用来标记图片的实际尺寸。 代码如下：
//图片地址
var imgSrc = 'https://farm4.staticflickr.com/3530/3273073729_4cc8a5c665_z.jpg?zz=1'; var img = new Image();
img.onload = function(){
console.log('img onload'); if ( typeof img.naturalWidth != 'undefined') {
originalImgW = img.naturalWidth;
originalImgH = img.naturalHeight;
console.log('natural -> ', originalImgH, '~~', originalImgW);
} else {
13 originalImgW = img.width;
14 originalImgH = img.height;
15 console.log('IE8 -> ', originalImgH, '~~', originalImgW);
}
} img.src = imgSrc;
但是，在实际项目中使用上述代码却出现了bug.
当浏览器为IE8，并且开启了IE8兼容模式后，在无缓存的情况下，img.width 与 img.height属性获取的值为0，缓存后width与height属性值正常。
在浏览器IE8，不开启IE8兼容模式，关闭浏览器缓存，上述现象几率性出现。
根据现象分析，图片如果缓存了，就可以正确获取图片的尺寸，因此是否可以在无缓存时加载两次图片，获取第二次的尺寸。
将代码更改如下：
//图片地址
var imgSrc = 'https://farm4.staticflickr.com/3530/3273073729_4cc8a5c665_z.jpg?zz=1'; var img = new Image(); img.onload = function(){
console.log('img onload'); if ( typeof img.naturalWidth != 'undefined') {
originalImgW = img.naturalWidth;
originalImgH = img.naturalHeight;
console.log('natural -> ', originalImgH, '~~', originalImgW);
} else {
var img4Fix = new Image();
img4Fix.src = imgSrc;
originalImgW = img4Fix.width;
originalImgH = img4Fix.height;
console.log('IE8 with fix -> ', originalImgH, '~~', originalImgW);
}
} img.src = imgSrc;
当img图片onload后，缓存中其实已经有了图片文件。
img4Fix 向同一个地址请求图片，浏览器判断该地址已经存在缓存中，则不再向服务器发送请求，是从缓存中获取图片，获取的缓存图片的尺寸是正确的。
由于第二次请求同一个图片不再向服务器发送请求，所以也无需再监听img4Fix的onload事件。