jquery - jquery imagesLoaded image by image

Question

私は、いくつかのアクション（フェードインなど）を実行する前に、各画像（束から）がいつロードされるかをリッスンするjqueryソリューションを見てきました。

すべての画像がロードされたときにこれimagesLoadedを行うことができましたが、他の画像の状態とは無関係に、ロードされたら各画像で実行したいと思います。

これはで可能だと思いますがimagesLoaded、それを機能させることができませんでした。誰かいますか？

他の解決策は？

score 0 · Accepted Answer

これを機能させるには、まず画像を非表示にする必要があります。

$('img').css('display', 'none');

load次に、イベントが発生したときにフェードインします。

$('img').load(function(){
    $(this).fadeIn();
});

score 0 · Accepted Answer

次のように関数を DOM に直接アタッチできます<img onload="executeThisImage(imgId);" />。

または、mipe34 が提案するように、jQuery を使用して負荷を直接バインドすることもできます。

$("#myImage").load(function() { ... });

score 0 · Accepted Answer

jQueryを使用してこれを試してください：

$("#myImage").bind("load", function () { $(this).fadeIn(); });

または異なる構文で同じ：

$("#myImage").load(function(event) {
    $(this).fadeIn();
});

SOに関する次の興味深いトピックも確認してください。

2つ目は本当に興味深いものです。画像がブラウザによってキャッシュされている場合でも機能させる方法があります。

このトピックに関する最良の回答に従います。次のような最適なソリューションが表示されます。

$("#myImage").one('load', function() {
  $(this).fadeIn();
}).each(function() {
  if(this.complete) $(this).load();
});

ここでは、イベントハンドラーが最大 1 回実行されることを保証するために、イベントバインドに使用されます。ループは、画像がキャッシュされている場合、そのeach画像で load イベントを発生させることを保証します。

score 0 · Accepted Answer

そのためにjQueryロードイベントを使用できます：

$("img").load(function(event) {
    console.log(this);
});

コードを特定の画像セットに限定することをお勧めします。たとえば、クラスを使用します。

$("img.foo").load(function(event) {
    console.log(this);
});

5 に答える 5