web-dev-qa-db-ja.com

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

JQueryで画像が読み込まれると検出できますか？

jqueryimage-load
55
Pablo

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

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

必ずそれをアタッチしてくださいbeforeソースを設定します。そうしないと、ハンドラをアタッチする前にイベントが発生した可能性があります（キャッシュからの読み込みなど）。

not実行可能（バインド後にsrcを設定）の場合は、次のように、ロードされているかどうかを確認し、自分で起動してください。

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

プレーンな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;
18
Peter Ajtai

私もこれを長い間研究してきましたが、このプラグインがこれを素晴らしく助けることを発見しました： https://github.com/desandro/imagesloaded

非常に多くのコードのように思えますが、...画像が読み込まれたときに確認する他の方法は見つかりませんでした。

4
vsync

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
     });
}
4
jroi_web

Jqueryを使用すると簡単です。

$('img').load(function(){
   //do something
});

試した場合：

$('tag')html().promise().done(function(){ 
   //do something
}) ;

ただし、画像がロードされているかどうかはチェックされません。コードがロードされると、その発砲が行われます。それ以外の場合は、コードが実行されたかどうかを確認してから、imgロード機能を起動し、画像が実際にロードされているかどうかを確認できます。したがって、両方の組み合わせを行います。

$('tag')html('<img src="'+pic+'" />').promise().done(function(){ 
   $('img').load(function(){
     //do something like show fadein etc...
   });
}) ;
1
Swen

これは少し役立つと思います：

    $('img').error(function(){
        $(this).attr( src : 'no_img.png');
 })

したがって、ロードされた場合-元の画像が表示されます。その他-表示される画像には、クラッシュした画像または404 HTTPヘッダーが含まれています。

0
Roman Kozin