网页打开很慢 图片懒加载JS

之前做项目时遇到页面需要加载图片太多;导致网页打开很慢;那时就用到了懒加载。能够防止页面向服务器发送大量请求;导致服务器响应慢;页面卡顿崩溃等。

1. 懒加载

原理;图片进入可视区域之后再去请求图片资源。

在图片进入可视化区域之后;动态的去设置img标签中的src属性。如果在可视区域之外的图片的img中的src属性已被提前设置;那么就不是懒加载了;而是所有图片都会被加载。

2. 实现

在浏览器可视区域的图片显示;可视区域外的不显示;所以当图片距离顶部的距离top-height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了;就是说当top-height<=s;h时;图片在可视区。

// onload是等所有的资源文件加载完毕以后再绑定事件
window.onload = function(){
    // 获取图片列表;即img标签列表
    var imgs = document.querySelectorAll(;img;);

    // 获取到浏览器顶部的距离
    function getTop(e){
        return e.offsetTop;
    }

    // 懒加载实现
    function lazyload(imgs){
        // 可视区域高度
        var h = window.innerHeight;
        //滚动区域高度
        var s = document.documentElement.scrollTop || document.body.scrollTop;
        for(var i=0;igetTop(imgs[i])) {
                // 真实情况是页面开始有2秒空白;所以使用setTimeout定时2s
                (function(i){
                    setTimeout(function(){
                        // 不加立即执行函数i会等于9
                        // 隐形加载图片或其他资源;
                        //创建一个临时图片;这个图片在内存中不会到页面上去。实现隐形加载
                        var temp = new Image();
                        temp.src = imgs[i].getAttribute(;data-src;);//只会请求一次
                        // onload判断图片加载完毕;真是图片加载完毕;再赋值给dom节点
                        temp.onload = function(){
                            // 获取自定义属性data-src;用真图片替换假图片
                            imgs[i].src = imgs[i].getAttribute(;data-src;)
                        }
                    },2000)
                })(i)
            }
        }
    }
    lazyload(imgs);

    // 滚屏函数
    window.onscroll =function(){
        lazyload(imgs);
    }
}