0

我有一个包含许多方形图像（相同宽度和高度）的页面，其中大小由宽度控制：50%。他们将延迟加载使用 IntersectionObserver 的 lozad.js ( https://www.npmjs.com/package/lozad )。问题是 IntersectionObserver 将计算所有图像的可见性，因为高度为 0（或未知）并且所有图像将立即加载。我想将高度设置为与宽度相同，但看不到这怎么可能！？

<img class="lozad" style="width:50%;" data-src="1.jpeg">
<img class="lozad" style="width:50%;" data-src="2.jpeg">
<img class="lozad" style="width:50%;" data-src="3.jpeg">
<img class="lozad" style="width:50%;" data-src="4.jpeg">
<img class="lozad" style="width:50%;" data-src="5.jpeg">
<img class="lozad" style="width:50%;" data-src="6.jpeg">
.
.
.
.
<img class="lozad" style="width:50%;" data-src="99.jpeg">
<img class="lozad" style="width:50%;" data-src="100.jpeg">
4

1 回答 1

0

我在不使用 lozad.js的情况下实现了类似的页面。这个想法是基于这样一个假设，即您可以近似保证始终覆盖可用屏幕高度的图像数量，例如INTERSECT_PAGESIZE = 2. IntersectionObserver然后，当用户使用API向下滚动页面时，您的页面只能加载 2 张图像和延迟加载屏幕外图像。

首先，您的页面模板提供data-idx了从 0 开始的附加信息：

<img data-idx="0" data-src="0.jpeg" class="image1">
<img data-idx="1" data-src="1.jpeg" class="image1">
<img data-idx="2" data-src="2.jpeg" class="image1">
...

因此，当页面首先加载时，src由于尚未提供属性，因此不会加载任何图像。然后下面的伪代码显示了您的 javascript 可以做什么：

  1. 查询所有img.image1标签并将其保留为list
  2. 对于每一个img，添加load调用的事件监听器this.observe(img)
  3. 在indexToObservesetter 中，对于img给定索引的前 2 秒，使用来自的src值设置属性data-src
  4. 设置 API 以检测观察到的元素正在向下滚动，然后设置 newindexToObserve以触发加载另外 2 个图像

此处解释了更多详细信息，提供了 3 个示例（使用纯 javascript、Angular 或 React）以及指向 repos 和演示的链接。

于 2018-02-10T00:25:28.380 回答