質問
画像にjQueryがロードされたら検出することは可能ですか?
解決
使用できます .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();
});
他のヒント
Plain 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;
私はこれを長い間研究してきましたが、このプラグインを見つけて、これを素晴らしく助けることができました。 https://github.com/desandro/imagesloaded
それは非常に多くのコードのように思えますが、...画像がロードされたときにチェックする他の方法は見つかりませんでした。
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
});
}
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...
});
}) ;
これはあなたを少し助けることができると思います:
$('img').error(function(){
$(this).attr( src : 'no_img.png');
})
したがって、ロードされた場合、元の画像が表示されます。他の - は、クラッシュした画像または404 HTTPヘッダーを含む事実を含む画像が表示されます。