IntersectionObserver实现图片懒加载-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44084420/article/details/114208879

本文介绍了使用IntersectionObserver API进行图片懒加载的原理，通过监听元素是否进入视口判断是否加载图片，同时提及了需要考虑浏览器兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理：
IntersectionObserver.observe()：使IntersectionObserver开始监听一个目标元素；
isIntersecting属性：可以判断该元素是否出现在视口内；
遍历每个img元素，然后监听每一个元素，最后根据isIntersecting属性去判断元素是否出现在视口内，从而决定是否让他加载。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            height: 450px;
            display: block;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <!--图片地址暂时先保存在data-src这个自定义属性上面-->
    <img data-src="./img-loop/img/1.jpg" alt="懒加载1" />
    <img data-src="./img-loop/img/2.png" alt="懒加载2" />
    <img data-src="./img-loop/img/3.jpg" alt="懒加载3" />
    <img data-src="./img-loop/img/4.jpg" alt="懒加载4" />
    <img data-src="./img-loop/img/5.jpg" alt="懒加载5" />

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            if ("IntersectionObserver" in window) {
                const imgs = document.getElementsByTagName("img");
                const imageObserve = new IntersectionObserver((entries) => {
                    entries.forEach((entry) => {
                        // 通过该属性判断元素是否出现在视口内
                        if (entry.isIntersecting) {
                            // entry.target能够取得那个dom元素
                            const img = entry.target;
                            img.src = img.dataset.src;
                            // 解除监视
                            imageObserve.unobserve(img);
                        }
                    });
                });
                [...imgs].forEach((img) => {
                    // 开启监视每一个元素
                    imageObserve.observe(img);
                });
            } else {
                alert("您的浏览器不支持IntersectionObserver！");
            }
        });
    </script>
</body>

</html>

注：需要考虑兼容性