javascript - 表延迟加载

Question

设置:

所以，我有一张窄而长的 table (宽度:200 像素，高度:2000 像素左右)。这个表格被包裹在另一个具有固定高度 (300px) 和 overflow-y:scroll 的 div 中，给出一个固定高度的可见区域。在表格中，有许多垂直堆叠的单元格(参见图像和标记是包裹在 div 中的简单常规表格)。

问题:

每个单元格都包含图像，因此如果页面必须在加载网站之前获取大量单元格(包括图像和数据)，那么它会显着降低网站速度。

解决方法:

我正在考虑两种方法。

1. 仅对图像应用延迟加载。在这种情况下(例如，从上图中)。所有三个部分(第 1、2 和 3 部分)都将完全加载，但尚不可见的图像除外。虽然如果它必须获取大量数据(例如 100 多个单元)，它会最大限度地减少延迟，但我不确定这是否是最佳方法。

2. 另一种方法稍微复杂一点，但会尽可能减少延迟，非常理想。因此，当页面首次加载时，只有 section-1 可见，但 section-2 也会被加载(使用图像或延迟加载图像. 然而section-3此时不会加载。
当用户滚动到 section-2 时，section-3 将自动加载，但在用户向下滚动之前不可见。如果section-3在视点中，那么section-4`将被加载但不可见。你明白了。

有什么想法和方法吗？

谢谢。

Answer 1

两者都做。确保您的图像始终延迟加载，并且仅在用户滚动并接近(或位于)底部时才获取下一部分的数据。

我使用延迟加载图像系统，我在其中指定我的图像，如下所示:

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

我给 .lazyimg 一个宽度和高度，然后，当它滚动到 View 中时，我加载 data-src 并设置 background-image 在 .lazyimg 元素上。

这仅在您可以指定独立于实际图像大小的大小时才有效，background-size: cover|contain 是您的 friend 。

编辑

或者，我想您可以加载图像，然后将其作为 img 标记弹出到 DOM 中，但是更改元素的尺寸可能会影响任何可能看起来有些不和谐的兄弟布局，即使流畅的动画。

怎么做:onscroll回调。