javascript - IntersectionObserver 和高度未知的图像

Question

我有一个包含许多方形图像(相同宽度和高度)的页面，其中大小由 width: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">

Answer 1

我已经实现了 the similar page不使用 lozad.js。这个想法是基于这样的假设，即您可以估计保证始终覆盖可用屏幕高度的图像数量，比如 INTERSECT_PAGESIZE = 2。 .然后您的页面只能加载 2 个图像并在用户使用 IntersectionObserver 向下滚动页面时延迟加载屏幕外图像。应用程序接口(interface)。

首先，您的页面模板提供额外的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. 在indexToObserve二传手，前 2 img s 从给定索引，设置 src属性值来自 data-src
4. 设置 API 以便它检测观察到的元素正在向下滚动，然后设置新的 indexToObserve触发加载另外 2 张图片

更多细节说明here提供了 3 个示例(使用纯 javascript、Angular 或 React)以及指向存储库和演示的链接。