Question

我有一个包含许多方形图像（相同宽度和高度）的页面，其中大小由宽度控制：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

我在不使用lozad.js的情况下实现了the similar page。这个想法是基于这样的假设：你可以估算出可以保证始终覆盖可用屏幕高度的图像数量，比如说INTERSECT_PAGESIZE = 2。然后，当用户使用IntersectionObserver API向下滚动页面时，您的页面只能加载2张图片并延迟加载屏幕外图像。

首先，您的网页模板提供了从0开始的其他data-idx：

<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可以做什么：

查询所有img.image1代码并将其保留为list
对于每个img，添加调用load

this.observe(img)

在indexToObserve setter中，对于来自给定索引的前2 img s，设置src属性，其值为data-src
设置API以便检测到正在向下滚动观察到的元素，然后设置新的indexToObserve以触发加载2个以上的图像

更多细节解释here提供了3个示例（使用普通的javascript，Angular或React）以及指向repos和demos的链接。

IntersectionObserver和未知高度的图像

1 个答案: