解决获取图片实际尺寸（宽高）的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事件。