jquery - src を変更した後、すべての画像が読み込まれるまで待ちます

Question

ドキュメントが完全にロードされた後、画像のsrc属性を変更する必要があるプロジェクトがあります（少し修正します）。

私がしたいのは、 src 属性が変更された後のすべての画像が完全にロードされているかどうかを確認して、高さを計算し、それに基づいてコードを続行できるようにするオプションです。

これは可能ですか？

Answer 1

あなたはjQueryで行うことができます：

$('img#newsrc').load(function(){  // this triggers after image is loaded

    // do your checking

}

または特定の画像:

var file = 'beautiful.jpg';
$('img').attr('src', file).load(function() {  
    alert(file + 'is loaded');  
});  

Answer 2

ページ上のすべての画像がロードされた後に何かをしたい場合は、これを試してください:

$(document).ready(function () {
  var nImages = $('img').length;
  $('img').load(function () {
    nImages--;
    if (nImages == 0) {
      ... do whatever ...
    }
  }
});

すべての画像を含めたくない場合は、セレクター「img」をより具体的なものに変更してください。