Javascrip实现图片懒加载的方式

在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。

为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。

懒加载的好处
(1）减少加载时的线程数据，可以使可视区内的图片快速加载
(2）减少了同一时间发送到服务器的请求数量，减轻服务器压力

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

图片懒加载的思路
将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。

关于各种宽和高

页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;

懒加载的示例

<div class="imglist">
        <!-- src存放的是一个伪图片，等待的图片，data-src是自定义属性，存放真实的图片地址  -->
        <img src="images/1.jpg" data-src="img/1.jpg" alt="pic">
        <img src="images/2.jpg" data-src="img/2.jpg" alt="pic">
        <img src="images/1.jpg" data-src="img/1.jpg" alt="pic">
        <img src="images/2.jpg" data-src="img/2.jpg" alt="pic">
        <img src="images/1.jpg" data-src="img/1.jpg" alt="pic">
        <img src="images/2.jpg" data-src="img/2.jpg" alt="pic">
        <img src="images/1.jpg" data-src="img/1.jpg" alt="pic">
        <img src="images/2.jpg" data-src="img/2.jpg" alt="pic">
        <img src="images/1.jpg" data-src="img/1.jpg" alt="pic">
        <img src="images/2.jpg" data-src="img/2.jpg" alt="pic">
        <img src="images/1.jpg" data-src="img/1.jpg" alt="pic">
        <img src="images/2.jpg" data-src="img/2.jpg" alt="pic">
    </div>

.
.

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

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

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


    lazyload(img);

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