图片懒加载

「已注销」

已于 2022-06-13 16:50:54 修改

阅读量76

点赞数

分类专栏： JS 文章标签： javascript

于 2022-05-27 21:52:14 首次发布

本文链接：https://blog.csdn.net/lyc_3858/article/details/125010860

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

逻辑:图片的src先放一张空图片的地址(可以理解为占用很小的图片),后期通过事件监听滚动条,当要图片进入可视区,就把存放图片真地址的自定义属性值赋值给src。图片必须要给一个地址,不然img标签会有边框。

       结构上的准备:
           1、src放一张空图片,在自定义属性存放真图片地址。
           2、需要做懒加载的图片可以都设置一个类名,便于后面对懒加载图片的处理,不需要懒加载的就不需要这个类名。
       js准备:
           1、获取需要懒加载的图片(通过结构中设置的类名)
           2、获取图片离body的距离,获取可视区的高度与滚动条的距离之和
           3、对比       图片离body的距离   <   可视区的高度与滚动条的距离之和,就代表图片进入可视区
           4、当上面条件成立,获取自定义属性的真图片地址赋值给src
           5、通过事件监听给滚动条添加滚动事件(scroll),执行上面的1、2、3、4、对应的函数。
               只做到这里还是有问题的,虽然功能实现。因为用到了scroll事件,所以只要这个滚轮有动,就会不停的执行函数。
               其实当我们的图片加载结束就,滚动条再滚动是不需要再去执行函数的,而且每执行一次都会去获取需要懒加载的图片,
               当图片加载完成后是不需要去获取需要懒加载的图片了。
           完善:升华
           6、把已经改为真实地址的图片,所在的元素里的我们在结构中设置的类名去掉,这样就不能通过设置的类名找到这个元素了。
           7、在这个函数里进行判断,当最后一张图片的路径已经被改成真实路径了,就证明所有的图片的路径都改完了,也就是所有图片加载完,那就不需要再执行了, 就移除通过事件监听。

<!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>图片懒加载简单原理</title>
    <style>
        .img img{
            width: 500px;
            height: 500px;
        }
        .original{
            background: gray;
        }
    </style>
</head>
<body>
    <div class="img">
        //这里面src是放的很小占用的图片,也就是我们说的假图片
        <img src="./00.gif" data-original="./1.png" class="original"><br>
        <img src="./00.gif" data-original="./2.png" class="original"><br>
        <img src="./00.gif" data-original="./3.png" class="original"><br>
        <img src="./00.gif" data-original="./4.png" class="original"><br>
    </div>
    <script>
        function dd(){
            let originals = document.querySelectorAll('.original');		//获取所有要懒加载的图片

			let scrollTop = window.innerHeight + window.pageYOffset;    //这个距离是可视区的高度与滚动条的距离之和

            //这个是可视区高度加上卷去的高度,这个方法也可以实现,但是获取页面滚动高度的时候优先考虑使用 window.pageYOffset 然后在使用scrollTop。
			// var scrollTop = window.innerHeight + document.documentElement.scrollTop || document.body.scrollTop;

            for(let i = 0; i < originals.length; i++){

                //如果图片离html的距离小于滚动条的距离与可视区的距离之和的话，就表示图片已经进入到可视区了。
                if(originals[i].offsetTop < scrollTop){

                    //把自定义属性的图片地址赋值给src,替换之前的假图片
                    originals[i].src = originals[i].getAttribute('data-original');

                    //如果这个图片的地址已经换成真实的地址了，那就把它身上的class去掉，为了再次获取不到这张图片
                    originals[i].removeAttribute('class');	
                }
            }
            if(originals[originals.length-1].getAttribute('src') != './00.gif'){
                //当这个条件成立的时候，说明现在所有的图片的地址都已经换成真实的地址了，这个时候就不需要再执行这个函数了
				//这个是移除事件监听
                window.removeEventListener('scroll',dd);
            }
        }
        //添加事件监听
        window.addEventListener('scroll',dd);
    </script>
</body>
</html>