图片懒加载技术解析-优快云博客

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

本文介绍了图片懒加载的原理，即当图片头部距离浏览器顶部的高度小于等于视口高度加上滚动轴滚动长度时，图片开始加载。这种方法能有效提高网页加载速度。

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

原理：图片头部距离浏览器顶部的高度offsetTop <= 视口高度clientHeight + 滚动轴滚动长度scrollTop。

<!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/1.jpg" alt="懒加载" />
    <img data-src="./img-loop/2.png" alt="懒加载" />
    <img data-src="./img-loop/3.jpg" alt="懒加载" />
    <img data-src="./img-loop/4.jpg" alt="懒加载" />
    <img data-src="./img-loop/5.jpg" alt="懒加载" />
    <script>
        const imgs = document.getElementsByTagName('img');

        function lazyLoad(imgs) {
            console.log('触发了');
            // 视口的高度；
            const clientH = document.documentElement.clientHeight;
            // 滚动的距离，这里的逻辑判断是为了做兼容性处理；
            const clientT = document.documentElement.scrollTop || document.body.scrollTop;
            for (let i = 0; i < imgs.length; i++) {
                // 逻辑判断，如果视口高度+滚动距离 > 图片到浏览器顶部的距离就去加载；
                // !imgs[i].src 是避免重复请求，可以把该条件取消试试：可以看到不加该条件的话往回滚动就会重复请求；
                if (clientH + clientT > imgs[i].offsetTop && !imgs[i].src) {
                    // 使用data-xx的自定义属性可以通过dom元素的dataset.xx取得；
                    imgs[i].src = imgs[i].dataset.src;
                }
            }
        };
        // 一开始能够加载显示在视口中的图片；
        lazyLoad(imgs);
        // 设置节流函数
        function throttle(fn, delay) {
            let timer = null;
            return () => {
                if (timer) {
                    return;
                };
                timer = setTimeout(() => {
                    fn(imgs);
                    timer = null;
                }, delay)
            }
        }
        // 监听滚动事件，加载后面的图片；
        window.onscroll = throttle(lazyLoad, 500);
    </script>
</body>

</html>

图片懒加载方式(一）