延迟加载

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回调。