作用: 保证页面打开的速度(3s之内如果首页打不开，就已经算是死亡页面了)。
原理:
- 对于首屏幕中的图片: 首先给对应的区域一张默认图片占的位置(默认图需要非常的小，一般维持在5kb内)，当首屏内容都加载完成后，才开始加载真实的图片，或者也可以给一个延迟的时间。
- 对于其他屏幕的图片: 也是给一张默认的图片占位，当滚动条滚动到对应区域的时候，再开始加载真实的图片
拓展: 数据的异步加载，开始只把前两屏幕的数据加载绑定出来，后面的数据不进行处理，当页面滚动到对应区域时，再重新请求数据，然后再绑定渲染数据。
步骤
- 给需要懒加载的图片外层放置一个容器。给
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%;
}
- 使用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);
