使用纯 JavaScript 实现图像延迟加载

应用程序大小和文件请求的一半都与图像有关。如果你想让你的应用程序更快、更轻量，那么考虑图像优化是一个不错的起点。

您可以通过延迟加载图像来提高应用程序的运行速度。这意味着仅当图像出现在设备视口内或附近时才显示它们。您可以使用 Intersection Observer API 来实现。

路口观察员

它是一个性能 API，会在元素进入或离开视口时通知您。掌握何时隐藏或显示元素的信息非常有用。您可以使用它进行分析，追踪用户查看当前元素所花费的时间，在视频到达视图中的某个点时启动或停止播放，或者在滚动到页面底部时加载更多内容（例如图片）。Intersection
Observers 是一个非常高效且完美的滚动事件追踪工具。

要使用 Intersection Observer，我们调用一个构造函数并传递一个回调函数。该回调函数将在每个被观察的元素上运行。要观察特定元素，我们选择它们并observe在每个元素上调用该方法：

<head>
    <style>
        .box {
            border: 1px solid;
            height: 400px;
            width: 500px;
        }
    </style>
</head>

<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>

    <script>
        const io = new IntersectionObserver((entries) =>
            entries.forEach((entry) =>
                console.log(
                    entry.target.innerText + " entered the view: " + entry.isIntersecting
                )
            )
        );

        document.querySelectorAll(".box").forEach((element) => io.observe(element));
    </script>
</body>

如果您运行此代码并检查浏览器控制台，您应该看到所有div元素都已注册，并且在滚动页面时，每个元素在进入和离开视口时都会打印输出。

延迟加载图像

当浏览器检测到图像标签中的源属性时，它会从路径下载、解析并渲染图像。通过操作源属性和数据集属性，我们可以决定何时显示图像。

延迟加载图像背后的想法是：

删除图像src属性或添加占位符
将源链接放入数据集属性中
在图像上调用交叉观察器
当检测到交叉点时，从数据集中取出源并将其放置在src

数据集属性是存储附加信息以供后续访问的理想位置。通过将实际图像路径放入data-src，然后选取该路径并将其设置为src属性，我们就能加载图像。

<body>
    <img class="lazy" data-src="lazy-image.jpg">
    <img class="lazy" data-src="lazy-image.jpg">
    <img class="lazy" data-src="lazy-image.jpg">

    <script>
        const io = new IntersectionObserver((entries) =>
            entries.forEach((entry) => {
                // set image source only when it is in the viewport
                if (entry.isIntersecting) {
                    const image = entry.target;
                    // setting image source from the dataset
                    image.src = image.dataset.src;

                    // when image is loaded, we do not need to observe it any more
                    io.unobserve(image);
                }
            })
        );

        document.querySelectorAll(".lazy").forEach((element) => io.observe(element));
    </script>
</body>

这是如何使用纯 JavaScript 来延迟加载图像的最简单的示例。

需要考虑的事情

图像标签的大小由图片定义。如果您未指定其尺寸，或未为该src属性设置占位符，则所有图片的大小都将为 0px，并且观察者会立即加载。

Intersection Observer API 几乎适用于所有现代浏览器。但如果您需要支持老版本浏览器，则需要使用 polyfill。此外，一个好方法是先检查浏览器是否支持 Intersection Observer。如果没有，请运行 fallback 代码。

结论

使用图像延迟加载将使页面更轻，加载时间更快，减少浏览器资源的使用并使用户体验更加愉快。

鏂囩珷鏉ユ簮锛�https://dev.to/spukas/image-lazy-loading-with-pure-javascript-dkh