1

私のサイトには 3 つの水平 div (コンテナー) が含まれており、それらはすべてリスト ビュー (ul -> li) 内に遅延読み込み画像を持っています。「しきい値」が「0」に設定されている場合、それらはすべて完全に正常にロードされ、右にスクロールするとすべての画像がロードされます。

ただし、「しきい値」を「500」に設定すると、遅延ロードされるのは最初のコンテナーだけです。他の div コンテナーは、最初の div コンテナーの最後までスクロールするまで、遅延読み込みを開始します。

例: 2 番目の div コンテナーでスクロールしようとすると、画像が読み込まれません。遅延読み込みは、最初の div コンテナーが最後までスクロールされたときにのみ開始されます。

私のスクリプト：

  <script type="text/javascript" charset="utf-8">
  $(function () {
      $("img").lazyload({ container: $(".horizontalBookList1") });
  });
  $(function () {
      $("img").lazyload({ container: $(".horizontalBookList2") });
  });
  $(function () {
      $("img").lazyload({ container: $(".horizontalBookList3") });
  });
  $("img").lazyload({
      effect: "fadeIn"
  });
  $("img").lazyload({
      threshold: 500
  });
  </script>

事前に、どうもありがとうございました:)

遅延読み込みスクリプトへのリンク: http://www.appelsiini.net/projects/lazyload

4

1 に答える 1

0

プラグインを 5 回初期化する代わりに、3 回だけ実行します。コンテナーごとに 1 回、各コンテナー内のイメージに対してのみ。以下が機能するはずです：

$(function() {
    $(".horizontalBookList1 img").lazyload({ 
        container: $(".horizontalBookList1"),
        effect: "fadeIn,"
        threshold: 500
    });
    $(".horizontalBookList2 img").lazyload({ 
        container: $(".horizontalBookList2"),
        effect: "fadeIn,"
        threshold: 500
    });
    $(".horizontalBookList3 img").lazyload({ 
        container: $(".horizontalBookList3"),
        effect: "fadeIn,"
        threshold: 500
    });
};
于 2013-09-23T21:10:41.080 に答える