18

jQueryIsotopeを使用してプロジェクトを開始しました。当初は無限スクロールと統合されていましたが、少し不格好だと思いました。

InfiniteScrollをLazyLoadに置き換えることを望んでいたので、この2つを組み合わせて運が良かった人はいないかと思いました。彼らを上手にプレイさせるためのヒントは素晴らしいでしょう。

ミルに感謝

4

3 に答える 3

28

アイソトープの並べ替え/フィルタリング関数を使用する場合は、lazyloadのfailure_limitを設定し、アイソトープのonLayoutコールバックでイベントをトリガーする必要があります。

jQuery(document).ready(function($) {
    var $win = $(window),
    $con = $('#container'),
    $imgs = $("img.lazy");

    $con.isotope({
        onLayout: function() {
            $win.trigger("scroll");
        }
    });

    $imgs.lazyload({
        failure_limit: Math.max($imgs.length - 1, 0)
    });
});

説明

ドキュメントによると（http://www.appelsiini.net/projects/lazyload）

ページをスクロールした後、レイジーロードはアンロードされた画像をループします。ループでは、画像が表示されるようになったかどうかを確認します。デフォルトでは、折り目の下の最初の画像（表示されていない）が見つかるとループが停止します。これは、以下の仮定に基づいています。ページ上の画像の順序は、HTMLコードの画像の順序と同じです。一部のレイアウトの仮定では、これは間違っている可能性があります。

同位体でソート/フィルタリングされたリストでは、ページの順序がHTMLとは確かに異なるため、failure_limitを調整する必要があります。

ご覧のとおり、jQueryオブジェクトを格納して、その長さ1をfailure_limitとして使用できるようにします。長さが1である理由に興味がある場合は、lazyloadのupdateメソッドの次のチェックが原因です。

if (++counter > settings.failure_limit) {
    return false;
}

他のイベントの遅延読み込み

スクロール時にレイジーロードをトリガーしない場合は、使用しているイベントの「スクロール」トリガーを交換する必要があります。

デモ

http://jsfiddle.net/arthurc/ZnEhn/

于 2012-12-17T17:29:20.603 に答える
2

代わりにこれを使用すると運がいいと思います：https ：//github.com/fasterize/lazyload

ライブラリに依存しないため、壊れることはありません。

于 2012-07-10T14:31:07.830 に答える
2

jqueryアイソトープとlazyloadの両方を一緒に正常に使用する作業コードは次のとおりです（Chromeでテスト済み）

http://jsfiddle.net/wN6tC/62/

ブラウザコンソールでは、下にスクロールすると、画像が読み込まれたときにconsole.log（'loaded image'）の確認が表示されます。jsfiddle htmlボックスをドラッグして幅を変更すると、レイアウトが動的に変更されます。

背景の赤いクラスを追加したので、同位体がロード後にどのようにdomを変更するかを確認できます。これを設定しようとする際の問題のほとんどは、IMHO、同位体のdom操作に起因します。

これで始められるといいのですが。楽しむ。

更新： 他のブラウザーで例をテストしたことはありません。JavaScriptリソースのHTTPS参照が原因で、IEまたはFFが機能しなかったようです（セキュリティ上の奇妙な理由により）。ここに示すように、IEとFFで機能させるために必要なのは、それらを置き換えることだけでした。

http://jsbin.com/ajoded/ および http://jsfiddle.net/wN6tC/73/

于 2012-07-14T01:51:47.600 に答える