通过js实现图片懒加载的原理及代码

原创已于 2022-11-14 12:16:53 修改 · 1.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #visual studio code

于 2022-11-14 12:07:33 首次发布

本文详细介绍了图片懒加载的原理和实现方法，通过设置自定义属性`data-realsrc`来保存真实图片路径，当图片进入视口时进行加载，从而提高网页加载速度并节省用户流量。通过页面滚动事件监听，利用节流技术优化性能，实现图片的延迟加载。

所谓图片懒加载，就是想让页面在展示图片的时候，不一下子全部开始加载，而是等到屏幕快滑到该图片的时候，再开始加载，这样做的好处，提高网页加载效率，节省用户流量

原理：已加载高度 + 屏幕高度 >= 当前图片距离页面最上面的距离

自定义属性

<img src="./images/bg_pic.png" data-realsrc="./images/xiaowangz.jpg" class="images">

// 1.定义一个图片懒加载的函数
function lazyImg() {

    // 1.获取页面已经滚动的高度   获取当前设备的高度
    var scroolTop = document.documentElement.scrollTop || document.body.scrollTop;
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    // 2.获取到所有的图片资源
    var images = document.getElementsByClassName('images');
    // 3.遍历图片  通过当前图片的自定属性 找到真是的图片路径
    for (var img of images) {

        // 4.找到当前图片距离页面最上面的距离  < = 获取页面已经滚动的高度 +  获取当前设备的高度
        // 5.替换图片资源 把真是的图片路径 替换当前图片的src
        //  判断  如果 图片.offsetTop<= 滚动高+ 屏幕高
        //  替换图片
        if (((img.offsetTop - 100) <= (scroolTop + clientHeight)) && (img.getAttribute('data-realsrc'))) {
            //真实路径
            var realSrc = img.getAttribute('data-realsrc');
            console.log(realSrc);
            img.src = realSrc;
            //不让已经加载的图片 再次进入当前判断中
            img.removeAttribute("data-realsrc");
        }
    }

}


//使用节流 

// 页面加载 调用懒加载函数
window.onload = lazyImg;
// 页面滚动  条慵懒加载函数
window.onscroll = lazyImg;