前端学习笔记:使用原生JS实现懒加载

289 阅读2分钟

使用场景

一般用于图片较多的页面,常用于首页。能够加快首页的加载速度,实现首页秒开的效果。

原理

1、将需要懒加载的图片放入img的data-img属性中,img的src属性使用一张占位图(一般为1*1的图)占位;(由于页面的大量图片均为同一张占位图,所以加载页面的时候速度会很快。) 2、监测页面滚动事件。若需要懒加载的图片出现在屏幕内,则将src属性替换为data-img属性。

主要难点

1、原生JS如何获取图片在浏览器中的位置

2、兼容性问题

实现过程

对应的html页面如下

<div class="img-box">
    <div class="img"><img src="g.png" data-img="https://localhost/images/1.png" /></div>
    <div class="img"><img src="g.png" data-img="https://localhost/images/2.png" /></div>
    <div class="img"><img src="g.png" data-img="https://localhost/images/3.png" /></div>
    <div class="img"><img src="g.png" data-img="https://localhost/images/4.png" /></div>
    <div class="img"><img src="g.png" data-img="https://localhost/images/5.png" /></div>
    <div class="img"><img src="g.png" data-img="https://localhost/images/6.png" /></div>
    <div class="img"><img src="g.png" data-img="https://localhost/images/7.png" /></div>
    <div class="img"><img src="g.png" data-img="https://localhost/images/8.png" /></div>
    <div class="img"><img src="g.png" data-img="https://localhost/images/9.png" /></div>
    <div class="img"><img src="g.png" data-img="https://localhost/images/10.png" /></div>
</div>

对应的JS实现如下

window.addEventListener("scroll", lazyload);
function lazyload() {
    var imgs = document.querySelectorAll(".img");
    var scrollTop = window.offsetY || document.documentElement.scrollTop || document.body.scrollTop;
    var windowHeight = window.innerHeight;
    imgs.forEach(img => {
        document.getBoundingClient(res => {
            var y = res.y;
            if (scrollTop + windowHeight >= y) {
                //触发事件
                img.src = img.dataset.img
            }
        })
    })
}

个人疑惑

之前看到有人在页面加载完后,将已经加载好的图片用占位图替换,重新实现懒加载。

懒加载的目的不是为了实现首页秒开吗?既然首页都已经加载完了,再使用懒加载不是多此一举吗?