同位素+ Lazyload：圖像大小

Question

在揭露我的問題之前要牢記兩件事： 1.我不是程序員，因此我沒有想法我在做什麼 2.跟我說話，像我這是很愚蠢的，並且非常有耐心（見1）。

好吧，網站設置的方式有大約100萬個錯誤，但現在我只是想讓同位素使用Lazyload 。我可能已經閱讀了關於這個問題的每一個stackoverflow，但到目前爲止我還沒有能夠解決我的問題。 我使用Stacey作爲CMS。基本上，我試圖實現的目標類似於xxx.aestheticallyloyal.com（或者事實上，www.imageworkshop.com/lazyload-portfolio），但是可以通過可點擊的縮略圖排列同位素/砌體風格，並在各自的項目頁面中打開。 我嘗試讓Infinitescroll工作，但我並不確定分頁是否支持Stacey，因此我放棄了這一點。輸入Lazyload。

我得到了同位素正常工作。我可以讓Lazyload正常工作，分開。但是每當我嘗試將這兩者混合在一起時，我就慘不忍睹。問題是圖像在完全加載之前由Isotope組織，因此它們不根據它們的實際尺寸（這是可變的）進行對齊，而是獲得固定的寬度和高度（對於固定寬度，這就是要點，但高度應該相應調整）。然而，如果我在此之後重新調整窗口大小，則網格會相應地進行調整，因爲它應該如此。

這是我的工作代碼：

<script> 
$(function() { 
    var $window = $(window); 
    var $container = $('#container'); 
    var $imgs = $("img.lazy"); 

    $imgs.lazyload({ 
     event: 'scroll', 
     effect: 'fadeIn', 
     failure_limit: Math.max($imgs.length - 1, 0), 
     appear: function() {} 
    }); 

    $(function() { 
     $container.imagesLoaded(function() { 
      $container.isotope({ 
       onLayout: function() { 
        $window.trigger("scroll"); 
       }, 
       itemSelector: '.photo' 
      }); 
     }); 
    }); 

    $window.load(function() { 
     $container.isotope('reLayout'); 
    }); 
}); 
    </script> 

它在許多方面可能是錯的......我不知道。另外，我認爲reLayout完全沒有做任何事情，從那裏我真的不知道該往哪裏去。任何人都可以看看我的網站flow.blukaet.com，讓我知道如何排序這個混亂？ （不要忘了左邊的菜單，我甚至沒有開始看這個）。 謝謝。

更新＃1

我一直在試圖用所謂的Fasterize不同Lazyload腳本。事情似乎只有稍微好一點，但我仍然有問題以正確的方式顯示在摺疊下方的圖像。基本上，在視口中加載的任何東西都可以通過Isotope排序，但其餘圖像不會根據其實際的最終可見大小進行添加。我需要在Isotope中觸發某些東西，以便在加載後重新排列新項目。我不知道是否有可能。任何人都可以幫忙嗎？ 這裏是你可以看到發生了什麼的網站：flow.blukaet.com （上面的代碼不再是實際的）。

更新＃2

因此，這是修改後的代碼感謝以下提供的答案（也，這是使用fasterize/lazyload而不是appelsiini的lazyload）：

<script> 
$(window).load(function() { 

var $container = $('#container'); 
var $imgs = $("img"); 

$container.imagesLoaded(function() { 
    $container.isotope({ 
     itemSelector: '.photo' 
    }); 
}); 

$(window).scroll(function() { 
    $container.isotope('reLayout'); 
}); 
}); 
</script> 

這不是超級流暢，但它完成了工作。

以前我試過沿着線的東西：

<script> 
$(function() { 

var $container = $('#container'); 
var $imgs = $("img"); 

$container.imagesLoaded(function() { 
    $container.isotope({ 
     itemSelector: '.photo' 
    }); 
}); 

$imgs.load(function() { 
    $container.isotope('reLayout'); 
}); 
}); 
</script> 

裏面居然跑了更加順暢，但不知何故被賦予以下控制檯錯誤：

cannot call methods on isotope prior to initialization; attempted to call method 'reLayout'

所以我不知道。

要注意的另一件事是代碼在FF和Opera中工作。顯然，Safari完全忽略了延遲加載。我沒有在Chrome和IE中測試過。如果有人想要退房：flow.blukaet.com

Answer 1

Huzzah！我認爲我們有最後的勝利者。我通過反覆試驗，發現了一些我找到的半解決方案 - 請記住你，因爲我仍然不知道自己在做什麼 - 而且我想我終於明白了。 控制檯不再返回初始化錯誤，並且代碼似乎或多或少地正確行爲（我認爲？！）。

<script> 
$(document).ready(function() { 

    var $container = $('#container'); 
    var $imgs = $("img"); 

    $container.imagesLoaded(function() { 
     $container.isotope({ 
      itemSelector: '.photo' 
     }); 
     $imgs.load(function() { 
      $container.isotope('reLayout'); 
     }); 
    }); 
}); 
</script> 

因此「重新佈局」不會發生在滾動但是當圖像加載，這樣，如果滾動不經過去整條路上，他們不會被卡住。

在Safari中，Lazyload仍然做它想做的事情，和往常一樣，我無法在Chrome和IE上測試，但在FF和Opera中似乎沒有問題。請查看flow.blukaet.com以獲取工作示例。

Answer 2

我有與響應網格相同的問題。 選中此圖片，網格左側可用，右側斷開。因爲需要對圖像特定高度

電網被破壞和響應過程經過高度值到「自動」。

所以在這裏我們不得不重新加載圖像時（給出特定的高度進行處理）。

現在我找到了解決辦法是重新佈局上雙擊自動滾屏：

$(window).scroll(function() { 
     $container.isotope('reLayout'); 
}); 

，但我敢肯定有更好的方法來做到這一點。

並嘗試freetile爲電網，發現它比其他人更偉大和更輕。 http://yconst.com/web/freetile/

Answer 3

雖然我有同樣的問題，無法解決，我意識到這只是一個警告。所以，我只是通過評論關閉控制檯日誌行文件中的「jquery.isotope.min.js」（或jquery.isotope.js）禁用它

var logError = function(message) { 
    if (window.console) { 
    //window.console.error(message); 
    } 
};