解决获取图片实际尺寸（宽高）的bug

　　需求：获取图片的宽高其实是为了预先做好排版样式布局做准备。

　　可以利用图片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事件。