2020-11-10

 

 

​一.什么是懒加载？

懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。

 

二.为什么要懒加载？

懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。

总结出来就两个点：

1.全部加载的话会影响用户体验

2.浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量

三.懒加载的实现原理？

由于网页中占用资源较多的一般是图片，所以我们一般实施懒加载都是对图片资源而言的，所以这里的实现原理主要是针对图片。

大家都知道，一张图片就是一个<img>标签，而图片的来源主要是src属性。浏览器是否发起请求就是根据是否有src属性决定的。

既然这样，那么我们就要对<img>标签的src属性下手了，在没进入可视区域的时候，我们先不给这个<img>标签赋src属性，这样岂不是浏览器就不会发送请求了。

总结：我们知道了从<img>标签下手，那么更重要的就是可视区域的判断了，这就是整篇文章的核心之处了。

 

四.实现步骤及Demo

1.先介绍几个和懒加载相关的API

// 可视区域的高度
document.documentElement.clientHeight 

 

//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
document.documentElement.scrollTop

2.HTML和css部分

<div class="index">
        <h3 style="align-content: center;font-size: 30px;text-align: center;">向下滚动查看加载效果</h3>
            <div class="index-img">
                <img src="img/loading.gif" data-src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg" alt="" />
            </div>
            <div class="index-img">
                <img src="img/loading.gif" data-src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3381573685,1866477444&fm=26&gp=0.jpg" src="" alt="" />
            </div>
            <div class="index-img">
                <img src="img/loading.gif" data-src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3386247472,87720242&fm=26&gp=0.jpg" src="" alt="" />
            </div>
            <div class="index-img">
                <img src="img/loading.gif" data-src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1208538952,1443328523&fm=26&gp=0.jpg" src="" alt="" />
            </div>
            <div class="index-img">
                <img src="img/loading.gif" data-src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3386247472,87720242&fm=26&gp=0.jpg" src="" alt="" />
            </div>
            <div class="index-img">
                <img src="img/loading.gif" data-src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3381573685,1866477444&fm=26&gp=0.jpg" alt="" />
            </div>
            <div class="index-img">
                <img src="img/loading.gif" data-src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg" alt="" />
            </div>
</div>

src路径下是我们需要配置的加载中的logo data-src存放的是我们需要真正请求的图片路径。

 

3.JS部分

function Limg(){
        var viewHeight = document.documentElement.clientHeight // 可视区域的高度
        var t = document.documentElement.scrollTop || document.body.scrollTop;//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
        var limg = document.querySelectorAll("img[data-src]")//获取所有带有data-src的属性值的img标签
        Array.prototype.forEach.call(limg, function(item, index) {//遍历这些标签
            var rect
            if(item.getAttribute("data-src") === "")
                return//如果属性值为空则直接renturn掉不在执行下面的操作
                        /*getBoundingClientRect()里面包含四个值分是
                        top元素上边距离页面上边的距离。
                        right元素右边距离页面右边的距离
                        left 元素左边距离页面左边的距离。
                        bottom元素下边距离页面下边的距离*/
            rect = item.getBoundingClientRect()
            // 图片一进入可视区，动态加载
            if(rect.bottom >= 0 && rect.top < viewHeight) {
                (function() {
                    setTimeout(function(){
                        var img = new Image()
                        img.src = item.getAttribute("data-src")
                        item.src = img.src
                        //给图片添加过渡效果，让图片显示
                        var j = 0
                        setInterval(function() {
                            j += 0.2
                            if(j <= 1) {
                                item.style.opacity = j
                                return
                            }
                        }, 100)
                    },1000)
                })()
            }
        })
}

四.gitHub地址

https://github.com/lirongyues/js/tree/master/%E5%8E%9F%E7%94%9FJS/imgLazyLoad/imgLazyLoad