jquery - 画像の読み込みを検出する

Question

jQueryで画像がロードされたら検出できますか?

Answer 1

.load()次のように、イベント ハンドラーを使用できます。

$("#myImg").load(function() {
  alert('I loaded!');
}).attr('src', 'myImage.jpg');

ソースを設定する前にアタッチしてください。そうしないと、ハンドラーをアタッチしてリッスンする前にイベントが発生する可能性があります (キャッシュからのロードなど)。

それができない場合(バインディング後に設定src)、次のように、ロードされているかどうかを確認し、自分で起動してください。

$("#myImg").load(function() {
  alert('I loaded!');
}).each(function() {
  if(this.complete) $(this).load();
});

Answer 2

プレーンな Javascript を使用するのと同じくらい簡単です。

  // Create new image
var img = new Image();

  // Create var for image source
var imageSrc = "http://example.com/blah.jpg";

  // define what happens once the image is loaded.
img.onload = function() {
    // Stuff to do after image load ( jQuery and all that )
    // Within here you can make use of src=imageSrc, 
    // knowing that it's been loaded.
};

  // Attach the source last. 
  // The onload function will now trigger once it's loaded.
img.src = imageSrc;

Answer 3

jQuery on('load') 関数を使用することは、画像がロードされているかどうかを確認する正しい方法です。ただし、画像が既にキャッシュにある場合、on('load') 関数は機能しないことに注意してください。

var myImage = $('#image_id');
//check if the image is already on cache
if(myImage.prop('complete')){ 
     //codes here
}else{
     /* Call the codes/function after the image is loaded */
     myImage.on('load',function(){
          //codes here
     });
}

Answer 4

I've been also researching this for long time, and have found this plugin to wonderfully help with this: https://github.com/desandro/imagesloaded

It seems like an aweful lot of code, but...I found no other way for checking when an image has been loaded.