1

これは、サンプルの html 構造です。

<div class=container>
    <div class=green></div>
    <div class=green></div>
    <div class=green></div>
    <div class=green></div>
</div>

以下のコードが機能します。

 $('.container').imagesLoaded(function(){
    $('.green').find('img').fadeIn(444);
});

唯一の欠点は、すべての画像が読み込まれるのを待ってから、同時にフェードインすることです。すべての画像が読み込まれるのを待つのではなく、読み込みが完了したらすぐに各画像を読み込むにはどうすればよいですか。

私はこれを試しましたが、うまくいきません：

    $('.green').imagesLoaded(function(){                    
        $(this).find('img').fadeIn(444);
    });
4

3 に答える 3

1

私は同じ問題を抱えており、imagesLoaded プラグインを次のようにメソッド.green内にバインドする必要があることがわかりました。.each()

$('.container').find('.green').each(function () {
    var _this = $(this);

    _this.imagesLoaded(function () {
        _this.find('img').fadeIn(444);
    });
});
于 2015-01-29T12:54:22.977 に答える
0

ええ、これは通常、かなり基本的な問題です。一部の画像は、load イベント ハンドラーを割り当てる前に読み込みを終了します。これは、画像がキャッシュされている場合に特に発生する可能性があります。

画像が HTML にある場合、信頼できる唯一の方法は、残念ながら (非常に醜い) インラインの onload 属性を含めることです。

<img src="..." alt="..." onload="$(this).fadeIn();">
于 2013-09-03T02:56:39.167 に答える
0

次のようなものを試してください::

jQuery.fn.eachLoaded = function(fn){
   return this.each(function(){
     // if already loaded call callback
     if (this.complete || this.readyState == 'complete'){
       fn.call(this);
     } else { // otherwise bind onload event
       $(this).load(fn);
     }
   });
}
$('.green img').eachLoaded(function(){
  $(this).fadeIn(444)
});
于 2013-09-03T03:15:31.923 に答える