結合 jQuery 同位素和延遲加載

Question

使用 jQuery Isotope 開始了一個項目。 最初與 Infinite scroll 集成，但認為它有點笨拙。

希望用 Lazy Load 取代 Infinite Scroll，並想知道是否有人有幸將兩者結合起來。 任何讓他們玩得開心的技巧都會很棒。

謝謝磨坊

Answer 1

如果要使用isotope的排序/過濾功能，需要設置lazyload的failure_limit，並通過isotope的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。 如果你好奇為什么它是length-1，那是因為下面檢查了lazyload的更新方法。

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

延遲加載其他事件

如果您不在滾動時觸發延遲加載，則需要為您使用的任何事件交換“滾動”觸發器。

演示

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

Answer 2

我想你可能會用這個代替： https ://github.com/fasterize/lazyload

它獨立於庫，因此不會損壞。

Answer 3

這是同時成功使用 jquery isotope 和 lazyload 的工作代碼（在 Chrome 中測試）

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

在瀏覽器控制台中，當您向下滾動時，您將在加載圖像時獲得 console.log('loaded image') 確認。 拖動jsfiddle html框改變寬度，你會看到布局動態變化。

我添加了背景紅色類，這樣您就可以看到同位素在加載后如何改變 dom。 嘗試設置它時的大部分問題來自，恕我直言，同位素的 dom 操作。

我希望這足以讓你開始。 玩得開心。

更新：我從未在其他瀏覽器中測試過示例，顯然 IE 或 FF 無法工作，因為 JavaScript 資源的 HTTPS 引用（出於某些奇怪的安全原因）。 替換它們是讓它在 IE 和 FF 中工作所需的全部，如下所示：

http://jsbin.com/ajoded/和http://jsfiddle.net/wN6tC/73/