延遲加載動態加載的內容中的圖像時，Chrome中的“待定”

Question

我有一個頁面，其中多個獨立部分顯示在選項卡中，每個部分可能包含數百張圖像。 為了提高頁面加載性能，我正在做兩件事：

這是我在Coffeescript中如何執行此操作的偽代碼：

    $.when.apply($, sectionPromises).then( () ->
      render each section
      $("img.lazyload").lazyload() 
      return
    )

最終發生的事情是，第一個選項卡式部分頂部的前幾張圖像加載正常，但是所有后續圖像（無論是在該第一部分中的下方還是整個其他選項卡式部分中的圖像）在Chrome中都只是“（待處理）” 。

在網站的其他部分，我使用該插件來懶加載傳統構造的頁面中的圖像（一次完成）時，不會發生這種情況。 但這是有趣的事情。 如果我向下滾動或在各個標簽之間移動時打開了Chrome開發者工具，則有時不會出現此問題。 一切都完美加載。 那有多瘋狂？

非常感謝您提供有關如何在動態生成的內容中獲取這些延遲加載的圖像以在Chrome中正確加載（而無需打開Chrome開發者工具）的想法。

Answer 1

我以為我遇到了類似的問題，但是對我來說，元素的顯示順序與DOM建議的順序不一樣（在DOM中不是順序顯示的），因此Lazyload插件檢查了某些元素，發現它們不在視口中並停止執行。

您可以嘗試將failure_limit選項增加到更高的值，請參閱“當圖像不連續時”下的jQuery.lazyload文檔：

默認情況下，當在視口之外找到第一個圖像時，循環將停止。 這是基於以下假設。 頁面上的圖像順序與HTML代碼中的圖像順序相同。 在某些布局假設下，這可能是錯誤的。 您可以使用failure_limit設置控制加載行為。

$("img.lazy").lazyload({
    failure_limit : 10
});

Answer 2

不幸的是，我能找到的最好的方法是導航到chrome://net-internals/#sockets並點擊頁面頂部的“ Flush socket pools”按鈕。 當我用所有圖像刷新頁面后，它們都將延遲加載。

顯然希望客戶調整他們的瀏覽器，更不用說知道如何了，這不是一個選擇，但是暫時可行。