6

複数のコンテナーにLazy Load プラグインを適用しようとしています。この同様の質問を見つけました: Lazy Load on MULTIPLE Horizo​​ntal containers。

これは私の試みです: http://jsfiddle.net/BAFMC/

$(".p_outer_content").each(function() {
    var tthis = $(this);
    $(this).find('img').lazyload({
        container: tthis
    });
});​

しかし、前述の質問と同じ問題があります。つまり、遅延ロードは最後のコンテナー (.p_outer_content) (フィドルの 3 番目のコンテナー) にのみ適用されます。

誰かがこれを解決する方法を知っているか、他の提案がありますか? 前もって感謝します'

編集：

コンテナの 1 つがスクロールされるたびに、lazyload 関数を再適用しようとしました。

$(".p_outer_content").each(function() {
    var tthis = $(this);
    $(this).find('img').lazyload({
        container: tthis
    });
});

$(".p_outer_content").scroll(function() {
    var tthis = $(this);
    $(this).find('img').lazyload({
        container: tthis
    });

});​

http://jsfiddle.net/BAFMC/4/

これは機能しますが、それを解決する良い方法かどうかはわかりません。しかし、誰かがより良い解決策を思いつきますか? ありがとう'

4

2 に答える 2

5

LazyLoad プラグインにバグがあります。カスタム コンテナーを提供すると、グローバル変数のリークが発生しました。ここで、このフォークに必要最小限の修正を追加しました。

https://raw.github.com/marchingants/jquery_lazyload/master/jquery.lazyload.js

これが実際のデモhttp://jsfiddle.net/BAFMC/5/ です

その例では github の raw ファイルを直接使用していますが、プロジェクトでは、ファイルを複製して縮小し、ローカルで使用します。

于 2012-07-09T19:43:17.997 に答える
3

複数の div を遅延ロードで動作させるには、画像のコンテナー ID を明示的に指定する必要があります。2 つの div がある場合#container1、次の#container2ように記述します。

$("#container1 img.lazy").lazyload({ container: $("#container1") });

$("#container2 img.lazy").lazyload({ container: $("#container2") });

それ以外の： $("img.lazy").lazyload({ container: $("#container1") });

$("img.lazy").lazyload({ container: $("#container2") });

于 2014-02-14T00:51:53.030 に答える