图片延迟加载
为什么要采用懒加载呢？
当有人访问你的网站时，他们需要下载当前页面上使用的所有文件，包括图片。图片通常体积较大，而且并非所有人的网络连接都稳定可靠。因此，如果你的页面包含大量图片，就会严重拖慢页面加载速度，导致用户在页面加载完成前只能看到一片空白。
懒加载
解决这个问题的一个方法是延迟加载那些不会立即显示的图片，也就是所谓的懒加载。比如，你可能需要向下滚动才能看到它们，或者你有一个轮播图，而页面上只显示了第一张图片。这样做可以大大加快页面的初始加载速度。
最后我还附上了一个演示，展示了延迟加载的一个应用示例。
那么它是如何运作的呢？
其实很简单，只需以下四个步骤：
- 设置图片尺寸
- 将链接保存为 HTML 属性以供后续使用。
- 等待触发事件（例如，用户正在滚动页面，图片进入视图）。
- 显示图像
那么，让我们详细地逐一了解每个步骤。
设置尺寸
现在可能会有人问，为什么要这样做？
原因是，当您插入图片时，页面上的内容会“跳动”，或者更确切地说，会移动位置来为图片腾出空间。
这样看起来不太美观，为了避免这种情况，我们只需设置一个img与图片尺寸相同的空元素。这样，当图片加载时，它就已经有一些空余空间，其余内容就不会移动。
那么，尺寸数据从何而来？
如果你对要显示的图像进行硬编码，那么你可能也对图像尺寸进行了硬编码。
更常见的情况是，你通过调用服务器的 API 获取图片链接。通常的做法是，图片尺寸会和链接一起发送。所以，当你获取到链接后，只需用 JavaScript 设置尺寸即可。
保存链接以备后用
有一种特殊的 HTML 属性叫做数据属性。它们都以 `<data>` 开头。data-它们在 HTML 中的样子如下：
<span id="getThis" data-author="Dave">Some text</span>
以下是在JS中访问它们的方法：
var spanNode = document.querySelector("#getThis");
var author = spanNode.dataset.author;
console.log(author); // Prints "Dave" to console
触发事件
这要视具体情况而定。
这是页面上需要用户滚动才能看到的图片吗？如果是，则触发条件是图片进入视图。（文章末尾有演示如何实现此功能的示例）
如果图片在轮播图中，那么或许可以加载当前显示图片旁边的图片。
图片是否仅在点击按钮或其他操作时显示？如果是，那么这就是触发条件。
显示图像
要做到这一点，只需获取存储的链接，并将src图像的属性设置为该链接即可。
演示
哇，你居然把这些都读完了，恭喜！或者你可能直接跳过了，不管怎样，下面是滚动示例的实现方法：
除了在 dev.to 上发表文章外，我还在我的 Instagram 上发布关于相同主题的简短图文解释，如果您感兴趣，可以查看这篇关于本文的帖子：https://www.instagram.com/p/B6k7krBlAmT/