web-dev-qa-db-ja.com

jQueryアイソトープと遅延読み込みの組み合わせ

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

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

ミルに感謝

javascriptjqueryhtmllazy-loadingjquery-isotope
15
Nelga

アイソトープの並べ替え/フィルタリング関数を使用する場合は、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/

24
acarabott

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

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

2
Krimo

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

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

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

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

これであなたが始めるのに十分だと思います。楽しんで。

更新：他のブラウザで例をテストしたことはなく、明らかにIEまたはFFがHTTPS参照のために機能しませんでしたjavascriptリソースの場合（セキュリティ上の奇妙な理由により）、IEおよびFFで動作させるために必要なのは、これらを置き換えることだけでした。

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

2
Anthony Hatzopoulos