画像の実際のサイズ(幅)を取得するバグを解決

需要:画像の幅を取得するのは、レイアウトの準備をしておくためです.
画像onloadイベントリスニングを使用して、画像の広い属性値を取得できます.IE 9の以下のバージョンでは、画像のwidthとheight属性しか使用できません.HTML 5には、画像の実際のサイズをマークするためにnaturalHeightとnaturalWidth属性が新たに追加されました.コードは次のとおりです.

 1 //    

 2 var imgSrc = 'https://farm4.staticflickr.com/3530/3273073729_4cc8a5c665_z.jpg?zz=1';

 3 

 4 var img = new Image();

 5 img.onload = function(){

 6 　　console.log('img onload');

 7                     

 8 　　if ( typeof img.naturalWidth != 'undefined') {

 9 　　　　originalImgW = img.naturalWidth;

10 　　　　originalImgH = img.naturalHeight;

11 　　　　console.log('natural -> ', originalImgH, '~~', originalImgW);

12 　　} else {                 

13 　　　　originalImgW = img.width;

14 　　　　originalImgH = img.height;

15 　　　　console.log('IE8 -> ', originalImgH, '~~', originalImgW);

16 　　}

17 }

18                 

19 img.src = imgSrc;

しかし、実際のプロジェクトでは上記のコードを用いるバグが発生している.
ブラウザがIE 8である、IE 8互換モードがオンになった場合、キャッシュがない場合、img.widthとimg.heightプロパティは0の値を取得し、キャッシュ後widthとheightプロパティの値は正常です.
ブラウザIE 8では、IE 8互換モードをオンにせず、ブラウザキャッシュをオフにすると、上記の現象が確率的に発生します.
　　
現象解析によれば,ピクチャがキャッシュされるとピクチャのサイズが正しく取得されるため,キャッシュなしで2回のピクチャをロードし,2回目のサイズを取得できるかどうか.　　
 
コードを次のように変更します.

 1 //    

 2 var imgSrc = 'https://farm4.staticflickr.com/3530/3273073729_4cc8a5c665_z.jpg?zz=1';

 3 

 4 var img = new Image();

 5 

 6 img.onload = function(){

 7     console.log('img onload');

 8     

 9     if ( typeof img.naturalWidth != 'undefined') {

10         originalImgW = img.naturalWidth;

11         originalImgH = img.naturalHeight;

12         console.log('natural -> ', originalImgH, '~~', originalImgW);

13     } else {

14         var img4Fix = new Image();

15         img4Fix.src = imgSrc;

16         originalImgW = img4Fix.width;

17         originalImgH = img4Fix.height;

18         console.log('IE8 with fix -> ', originalImgH, '~~', originalImgW);

19     }

20 }

21 

22 img.src = imgSrc;

imgピクチャonloadの後、キャッシュにはすでにピクチャファイルがあります.
img 4 Fixは、同じアドレスにピクチャを要求し、ブラウザがそのアドレスがキャッシュ中であると判断すると、サーバに要求を送信せず、キャッシュからピクチャを取得し、取得したキャッシュピクチャのサイズが正しい.
2回目の要求で同じピクチャがサーバに要求されなくなったため、img 4 Fixのonloadイベントをリスニングする必要もありません.