图片懒加载-1(首屏幕图片懒加载)

作用: 保证页面打开的速度(3s之内如果首页打不开，就已经算是死亡页面了)。
原理:

1. 对于首屏幕中的图片: 首先给对应的区域一张默认图片占的位置(默认图需要非常的小，一般维持在5kb内)，当首屏内容都加载完成后，才开始加载真实的图片，或者也可以给一个延迟的时间。
2. 对于其他屏幕的图片: 也是给一张默认的图片占位，当滚动条滚动到对应区域的时候，再开始加载真实的图片
   拓展: 数据的异步加载，开始只把前两屏幕的数据加载绑定出来，后面的数据不进行处理，当页面滚动到对应区域时，再重新请求数据，然后再绑定渲染数据。

步骤

1. 给需要懒加载的图片外层放置一个容器。给img标签通过display:none;隐藏。然后给外层的容器让一个大小很小的背景图。给img标签上设置一个自定义属性，用于存放图片的真实地址。

HTML
<div class="banner">
    <!--trueImg是当前IMG标签的自定义属性，存储的是真实图片地址-->
    <img src="" alt="#" trueImg="img/jd.jpg">
</div>

CSS
        .banner {
            margin: 10px auto;
            width: 350px;
            height: 200px;
            border: 1px solid green;
            background: url("../img/default.gif") no-repeat center center #e1e1e1; /*给当前的区域加一个默认图占位，告诉用户此处图片正在加载中*/
        }
        .banner img {
            display: none; /*在开始的时候，img的src属性没有地址，这样的话在IE浏览器中，容器中会显示一张碎图，不美观，所以让其隐藏；当真实的图片加载完成后再显示*/
            width: 100%;
            height: 100%;
        }

2. 使用JavaScript实现图片懒加载。现在是模拟情况，所以用一个延时定时器来使得图片延迟加载。还要考虑到如果img标签内地址设置错误，避免出现叉图的影响视觉的效果。所以使用 new Image()来暂时存放一个图片。并使用其onload方法判断图片是否加载成功：

    var banner = document.querySelector('.banner');
    var imgFir = banner.getElementsByTagName('img')[0];

    window.setTimeout(function () {
        // imgFir.src = imgFir.getAttribute('trueImg');
        // imgFir.style.display = 'block';
        // -> 以上处理还是不完整的: 如果获取的真实图片的地址是错误的，当赋值给IMG的src属性的时候，不仅控制台会报错，而且页面中会出现碎图，或者✘图，影响实际视觉效果
        // -> 获取图片的地址，验证地址的有效性，是有效的才赋值，不是有效的不进行赋值处理
        // var oImg = document.createElement('img');
        var oImg = new Image(); // 创建一个临时的img标签
        oImg.src = imgFir.getAttribute('trueImg');
        oImg.onload = function () { // 当图片能够正常加载就执行
            imgFir.src = this.src;
            imgFir.style.display = 'block';
            oImg = null;
            console.log('图片加载完成...');
            var now = new Date();
        }
        //console.log('图片正在加载中...');
        var time = new Date();
    }, 500);