图片懒惰的负载，通常是减少主页的白色屏幕时间的解决方案。在直觉的语言中，请勿直接加载所有图片，而要在满足某些条件后加载它，也就是说，即“惰性加载”。实施图片的许多方法懒负荷。如果您想简单地使用第三方插件：vue-lazyload。如果您想探索他人的插件是如何懒惰的，那么您可以看到本文的实现方式。
要实现图片懒负载，我们需要先了解特定的场景。一般而言，我们将在第一个屏幕上加载一些图片，而其他图片将不会首先加载。当页面滚动时，图片将在窗口中出现时出现。加载图片。为什么要意识到这一点页面的白屏长期很长时间，尤其是当图片相对较大时。
这
在此实施过程中，涉及一些知识点，让我们快速审查：
它是自定义数据属性的属性。它可以用于所有HTML元素和嵌入自定义数据内容。例如，可以在中国访问这些自定义数据：
我们实现懒惰加载的最终目的是替换适当的值并加载真实图片。定义的数据不仅可以在JS中，而且可以在CSS中访问。有关详细信息，请参考：数据集
该方法将返回一个包含当前元素大小和窗口的位置信息的对象。向名称显示可能有些困惑，但是图形的组合最好理解：
对象中的和谐包含元素的和谐，其位置信息是指每个边界窗口的原始点的位置，该窗口包含元素的最小矩形。
由于我们将在全球范围内收听滚动事件，因此，如果我们每次滚动回调功能，它将导致不必要的计算成本，因此我们考虑使用投掷来处理滚动事件。在此不重复节流的特定细节。让我们简单地实现一个投掷：
有一些非常相似的“高度”，我们将简单地解决：
我们可以在此处使用它，因为我们会聆听对象上的滚动事件。
准备工作已经完成，然后直接使用代码。
代码中有相应的注释。在理解上述准备知识之后，代码非常简单：
操作结果：
这
首先，默认情况下，我们将加载三张图片以检查元素节点。这三张图片都没有，也没有未加载的图片。
这
加载图片的回调功能将在滚动过程中触发，DOM树将更改。
所有图片只会是，不。
本文听取了滚动活动。真实的图片是在图片出现在视觉区域之前加载的。如果没有出现，图片懒惰地加载图片，以默认的加载图片加载图片。从总体上讲，加载图片将相对较小，实际图片将非常大，因此使用加载图片来替换图片渲染时间。
原始：https：//juejin.cn/post/71116083441971208