使用JavaScript实现懒加载优化图片源地址-优快云博客

本文链接：https://blog.youkuaiyun.com/xuyan5228/article/details/133994864

本文介绍了如何在HTML和JavaScript中使用懒加载技术，通过监测滚动事件动态更改图片的src地址，当图片进入视口时才加载，同时提到闭包的概念及其在实现中的作用，以及可能存在的内存优化问题。

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

原理

在图片出现在视口市更换默认图片的src地址

HTML代码

<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />
<img src="./0.jpg" />

js代码

function lazyload() {
    //获取图片列表
    const imagesList = document.getElementsByTagName("img");
    var length = imagesList.length; // 一共有多少张图片
    var n = 0; // n用来保存之前已经加载过的多少张图片，就可减少下面遍历的次数
    return function () {
        console.log("dddd");
        var clientHeight = document.documentElement.clientHeight; // 浏览器可视区域的高度
        var scrollTop = document.documentElement.scrollTop; // 页面被遮挡的高度
        console.log(n);
        for (let i = n; i < imagesList.length; i++) {
            console.log(n);
            if (imagesList[i].offsetTop < clientHeight + scrollTop) {
                if (imagesList[i].getAttribute("src") === "./0.jpg") {
                    //当该img的路径为'./loading.png'时才把图片的真实路径赋值给src
                    imagesList[i].src = `./${i + 1}.jpg`;
                }
                n++;
            } else {
                break;
            }
        }
    };
}
const init = new lazyload();
init();
window.addEventListener("scroll", init, false); // 监听页面滚动事件，执行lazyload函数。