图片延迟加载/懒加载

$(document).ready()等到DOM加载完成就可以执行，可以执行多次，简写为$(function(){})。
window.onload()等网页中所有的资源加载完毕后（包括图片、flash、音频、视频），才能执行，只能执行一次。
作用： 保证页面打开的速度（3S内打不开页面就算是死亡页面）
原理：减少HTTP请求
1、对于首屏内容：首先给对应的区域一张默认图片占位置（默认图需要非常小，一般维持在5kb以内），当首屏内容都加载完成后（或者给一个延迟时间）再加载真实的图片
2、对于其他屏：也是有一张默认的图片占位，当滚动到对应区域的时候再加载真实的图片
扩展： 数据的异步加载，开始只绑定前两屏的数据，后面的数据不进行处理，页面滚动到对应区域再重新请求数据然后绑定渲染数据。
首屏图片延迟加载思路：创建一个临时的Imgage标签，先把真实的图片地址赋值给他，当图片能够正常加载时说明地址是真实有效的，此时再把图片地址赋值给页面中对应的标签，控制其显示为block，释放临时的Imgage标签。

window.setTimeout(function () {
        var oImg = new Image;
        oImg.src = imgFir.getAttribute("trueImg");
        // 当图片能够正常加载（每个图片都有这个方法）
        oImg.onload = function () {
            imgFir.src = this.src; // this是当前临时标签
            imgFir.style.display = "block";
            // 用完释放
            oImg = null;
        }
}, 500);

其他屏图片的延迟加载：如下图，当条件成立，加载真实图片，加载完成后继续滚动就会一直满足条件，就会重复触发加载，造成了资源浪费，因此设置自定义属性说明已经加载过了，后续不再加载（不管正常加载与否都不要处理第二次）

var banner = document.getElementById("banner"),
    imgFir = banner.getElementsByTagName("img")[0];
    window.onscroll = function () {
        if(banner.isLoad){ //加载过就不在二次操作
            return;
        }
       var A = banner.offsetHeight + utils.offset(banner).top;
       var B = utils.win("clientHeight") + utils.win("scrollTop");
       if(A <  B){
           var oImg = new Image;
           oImg.src = imgFir.getAttribute("trueImg");
           oImg.onload = function () {
               imgFir.src = this.src;
               imgFir.style.display = "block";
               oImg = null;
           }
       banner.isLoad = true;
       }
    };