延遲加載

Question

設置：

所以，我有一個窄但長表（寬：200像素，高：2000像素ISH）。該表格被封裝在另一個具有固定高度（300px）和overflow-y：scroll的div中，給出固定高度的可見區域。在表格中，有很多垂直堆疊的單元格（請參閱圖像和標記是簡單的常規表格，用div封裝）。

問題：

每個單元包含圖像，因此，如果有大量的頁面已經獲取包括加載網站，然後它會減慢前的圖像和數據單元的網站顯着。

解決方法：

我想到的兩種方法。

1. 將lazy-load應用於圖像只。在這種情況下（例如，從上圖中）。所有三個部分（第1部分，第2部分和第3部分）都將完全加載，但圖像尚不可見。儘管如果它必須獲取大量數據（例如100多個單元格），它將最小化延遲，但我不確定它是否是最好的方法。

2. 另一種方法稍微複雜一些，但會盡可能地減少延遲，非常理想。這樣，在第一次加載頁面時，只有section-1將是可見的，但section-2也將被裝載（具有圖像或延遲加載圖像. However部-3- will not be loaded at this point. When the user scrolls to the部-2- then the部-3- will be automatically loaded but not visible until user scrolls down. If部-3- is in the viewpoint, then部-4- `將被加載但不可見的。你明白了吧。

任何思考它，如何做？

感謝。

Answer 1

兩者都做。請確保您的圖片總是偷懶加載，並且只能得到下一個數據當用戶滾動並靠近（或在）底部時觸發。

我使用lazyload圖像系統，其中，指定我的圖片是這樣的：

<div class="lazyimg" data-src="path/to/image"> 
</div> 

我給.lazyimg的寬度和高度，然後，當它滾動到視圖中，我加載data-src並在.lazyimg設置background-image元件。

這隻適用於如果您可以指定一個大小獨立的實際圖像大小，background-size: cover|contain是你的朋友在這裏。

編輯

另外我想你可以加載圖像，然後在DOM作爲img標籤彈出，但改變了元件的尺寸可能影響可能出現一定程度的不和諧任何同級的佈局，甚至如果平滑動畫。

如何操作：onscroll回調。