带你搞懂图片懒加载

一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

图片懒加载的原理就是我们先设置图片的 data-src 属性（当然也可以是其他任意的，只要不会发送 http

请求就行了，作用就是为了存取值）值为其图片路径，由于不是 src，所以不会发送 http 请求。然后我们计算出页面 scrollTop

的高度和浏览器的高度之和，如果图片举例页面顶端的坐标

Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况），这时候我们再将data-

src属性替换为 src 属性即可

js代码：

代码语言：txt复制

// onload是等所有的资源文件加载完毕以后再绑定事件

代码语言：txt复制

window.onload = function(){

代码语言：txt复制

    // 获取图片列表，即img标签列表

代码语言：txt复制

    var imgs = document.querySelectorAll('img');

代码语言：txt复制

    // 获取到浏览器顶部的距离

代码语言：txt复制

    function getTop(e){

代码语言：txt复制

        return e.offsetTop;

代码语言：txt复制

    // 懒加载实现

代码语言：txt复制

    function lazyload(imgs){

代码语言：txt复制

        // 可视区域高度

代码语言：txt复制

        var h = window.innerHeight;

代码语言：txt复制

        //滚动区域高度

代码语言：txt复制

        var s = document.documentElement.scrollTop || document.body.scrollTop;

代码语言：txt复制

        for(var i=0;i<imgs.length;i  ){

代码语言：txt复制

            //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载

代码语言：txt复制

            if ((h s)>getTop(imgs[i])) {

代码语言：txt复制

                // 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s

代码语言：txt复制

                (function(i){

代码语言：txt复制

                    setTimeout(function(){

代码语言：txt复制

                        // 不加立即执行函数i会等于9

代码语言：txt复制

                        // 隐形加载图片或其他资源，

代码语言：txt复制

                        //创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载

代码语言：txt复制

                        var temp = new Image();

代码语言：txt复制

                        temp.src = imgs[i].getAttribute('data-src');//只会请求一次

代码语言：txt复制

                        // onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点

代码语言：txt复制

                        temp.onload = function(){

代码语言：txt复制

                            // 获取自定义属性data-src，用真图片替换假图片

代码语言：txt复制

                            imgs[i].src = imgs[i].getAttribute('data-src')

代码语言：txt复制

                    },2000)

代码语言：txt复制

                })(i)

代码语言：txt复制

    lazyload(imgs);

代码语言：txt复制

    // 滚屏函数

代码语言：txt复制

    window.onscroll =function(){

代码语言：txt复制

        lazyload(imgs);

代码语言：txt复制

0 人点赞