懒加载：
懒加载又称延迟加载，该技术的理念是按需加载。在一些大厂的产品中用的比较多，因为对页面渲染时间有严格限制。
应用懒加载的网站：
淘宝，京东，花瓣，美丽说...
相关概念：
网页可视区宽（
width + padding）：
document.body.clientWidth网页占位宽（
width + padding + border）：
document.body.offsetWidth
clientWidth/offsetWidth示例
网页正文全文宽：
document.body.scrollWidth网页正文被卷去的高度：
其他：document.documentElement.scrollTop
chrome:document.body.scrollTop
兼容写法：document.documentElement.scrollTop || document.body.scrollTop
scrollTop兼容示例
- 获取元素绝对位置：
offsetParent：定位父级：离自己最近的有定位的父级元素；没有手动设置定位父级的时候，默认定位父级为body。
element.offsetTop：相对于父级的顶部偏移值；
element.offsetLeft：相对于父级的左侧偏移值；
不存在element.offsetRigth和element.offsetBottom属性；
获取定位值
宽高写法相同，不一一列举；
应用场景：
涉及到图片，falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽，且这些模块暂且不在浏览器可视区内,因此可以使用懒加载技术在某个模块容器到达了网页可见区域时，再使用ajax异步请求将请求内容渲染出来，避免网页打开时加载过多资源，让用户等待太久。
判断模块是否进入可视区：
当用户浏览到首屏之外的其他模块，也就是其他模块进入可视区时，异步加载进而渲染资源到页面。
因此实现懒加载的关键点是判断模块是否进入可视区，也可以把可视区理解成一个模块，首屏外的内容为一个模块，当两个模块发生碰撞时即需是加载资源的时机。
盗一张图解释说明下两个模块的临界点：
判断模块是否进入视口
引入一个公式,以图二中的两个模块为例：
//top1 = 文档顶部卷去的高度；
//top2 = 元素相对于顶层定位父级的offsetTop值；
//height1 = 文档可视区的高度；
//height2 = 模块的高度；
m1 = top1 + height1 / 2
m2 = top2 + height2 / 2
|m1 - m2| < (height1 + height2) / 2
上面的公式中height1、height2和top2都为常量，只有top1为变量；
//假设：top1 = 0，top2 = 300, width = height = 300，则：
m1 = 0 + 300 / 2 = 150；
m2 = 300 + 300 / 2 = 450;
|m1 - m2| = (height1 + height2) / 2;
//此时为临界点，刚好相等；
//假设：top1 = 100，top2 = 300, width = height = 300，则：
m1 = 100 + 300 / 2 = 250;
m2 = 300 + 300 / 2 = 450;
|m1 - m2| < (height1 + height2) / 2;
//值小于时说明相交了；
获取元素相对于顶层父级的绝对位置：
function getDstResource(ele){
var l = 0,t = 0, w, h;
//获取元素占位宽高
w = ele.offsetWidth;
h = ele.offsetHeight;
while (ele.offsetParent){
//获取元素偏移值
l += ele.offsetLeft;
t += ele.offsetTop;
ele = ele.offsetParent;
}
return {'left':l,'top':t,'width':w,'height':h};
}
完整代码：
//获取可视区
function getVisiableZone(){
var l,t,w,h;
l = document.documentElement.scrollLeft || document.body.scrollLeft;
t = document.documentElement.scrollTop || document.body.scrollTop;
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
return {'left':l,'top':t,'width':w,'height':h};
}
//获取元素绝对位置
function getDstResource(ele){
var l = 0,t = 0, w, h;
//获取元素占位宽高
w = ele.offsetWidth;
h = ele.offsetHeight;
while (ele.offsetParent){
//获取元素偏移值
l += ele.offsetLeft;
t += ele.offsetTop;
ele = ele.offsetParent;
}
return {'left':l,'top':t,'width':w,'height':h};
}
//判断两个长方形是否交叠
function overlap(rect1,rect2){
var l1,l2,t1,t2,w,h;
l1 = rect1.left + rect1.width / 2;
l2 = rect2.left + rect2.width / 2;
t1 = rect1.top + rect1.height / 2;
t2 = rect2.top + rect2.height / 2;
w = (rect1.width + rect2.width) / 2;
h = (rect1.height + rect2.height) / 2;
return Math.abs(l1 - l2) < w && Math.abs(t1 - t2) < h;
}
//异步加载
if(overlap(getVisiableZone(),getDstResource(document.getElementById("xxx")))){
//相应的处理...
}
