$(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;
}
};
