javascript img onload（）

Question

私は<img> onload関数を使用して、読み込まれたイメージのサイズ変更アクションをトリガーします。しかし、1つのWebページに同じ "src"を持つ2つ以上の<img>がある場合、イメージが同じであることを意味します。後者の<img>のonload（）関数は呼び出されません。同じsrcを持つ<img>がある場合でも、<img>がすべて正しくサイズ変更されていることを確認するにはどうすればよいですか？

ありがとうございました。

Answer 1

これは、ブラウザが実際に最初の画像をキャッシュしているために発生しています。したがって、同じ「src」を再度ロードしようとすると、ローカルにキャッシュされ、実際にオンロードが実行されることはありません。常に読み込むために、クエリ文字列に一意の値を追加することができます。

Answer 2

代わりの各<img/>のために別々のonloadハンドラを使用して、なぜちょうどwindowのための単一のonloadイベントを使用していませんか？このイベントはの後にすべて（すべての画像のように）がロードされた後に起動するので、その単一のハンドラで各画像を処理することができます。次のようなものがあります。

function processAllImages() 
{ 
    var imgElts = document.getElementsByTagName('img'); 
    for (var i=0; i<imgElts.length; i++) 
    { 
     processImage(imgElts[i]); // TODO write this function 
    } 
} 

window.onload = processAllImages; 

Answer 3

私は以前同様の質問をしました。
これを確認してください：Javascript/jQuery: How to detect img is fully downloaded or not?

つまり、imgタグの '完全な'プロパティを使用することができます。
ロードイベントをバインドする前に確認してください。