SPA 应用中的图片懒加载：使用 IntersectionObserver API 实现-JavaScript中文网-JavaScript教程资源分享门户

前端开发中，常常需要处理图片的加载和显示。如果一次性加载所有图片，可能会导致页面加载变慢，影响用户体验。因此，我们可以使用图片懒加载技术来延迟载入图片，提高页面加载速度。

在 SPA（Single Page Application）应用中，使用 IntersectionObserver API 实现懒加载可以有效地帮助我们减少页面加载时间，提高用户体验。

IntersectionObserver API 简介

IntersectionObserver API 是用于观察元素交叉状态的 JavaScript API，可以用它来实现懒加载、滚动动画等效果。

使用 IntersectionObserver API 需要定义一个观察器（Observer），并配置观察器所关注的元素和相应的回调函数。当被观察元素的交叉状态发生改变时，观察器会调用这个回调函数。

Syntax:

let observer = new IntersectionObserver(callback, options);

参数说明：

callback：当被观测元素进入或离开目标元素区域时，会执行回调函数。回调函数的参数是一个数组，每一项都是一个被观测的元素，其中包含一些有用的信息，例如是否进入了目标元素区域、进入区域的交叉面积等。
options：可选对象，配置相关的参数，例如观察器的根元素、观察器的缓冲区大小等。

实现图片懒加载

使用 IntersectionObserver API 实现图片懒加载原理比较简单，首先我们定义一个观察器，观察图片所在的容器，当容器与屏幕交叉时执行回调函数，将 data-src 属性值赋值给 src 属性，实现延迟加载。

示例代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> IntersectionObserver Demo </title>
  <style>
    .container {
        width: 300px;
        margin: 0 auto;
    }
    img {
        width: 100%;
        height: 300px;
        display: block;
        margin-bottom: 20px;
        background-color: #eee;
    }
  </style>
</head>
<body>

<div class="container">
    <img data-src="https://picsum.photos/id/10/300/300" alt="">
    <img data-src="https://picsum.photos/id/20/300/300" alt="">
    <img data-src="https://picsum.photos/id/30/300/300" alt="">
    <img data-src="https://picsum.photos/id/40/300/300" alt="">
    <img data-src="https://picsum.photos/id/50/300/300" alt="">
    <img data-src="https://picsum.photos/id/60/300/300" alt="">
</div>

<script>
    let observer = new IntersectionObserver(function(entries, observer) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                let img = entry.target;
                img.setAttribute('src', img.getAttribute('data-src'));
                observer.unobserve(img);
            }
        });
    });

    let images = document.querySelectorAll('[data-src]');
    images.forEach(img => observer.observe(img));
</script>

</body>
</html>

在上面的例子中，我们使用了 querySelectorAll 方法选择了所有带有 data-src 属性的 img 标签，并使用 forEach 方法为每个图片都定义了一个观察器。

在观察器的回调函数中，我们使用 isIntersecting 属性判断图片是否进入了目标区域，并将 data-src 的值赋给 src 属性。最后调用 unobserve 方法取消对该图片的观测。

总结

本文介绍了如何使用 IntersectionObserver API 实现 SPA 应用中的图片懒加载技术。在实际开发中，我们可以根据需要修改观察器的相关配置参数，例如设置根元素、设置延迟加载的距离等，以达到最佳的用户体验效果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6528d1327d4982a6ebb5f095