懒加载剖析

懒加载：

懒加载又称延迟加载，该技术的理念是按需加载。在一些大厂的产品中用的比较多，因为对页面渲染时间有严格限制。

应用懒加载的网站：

淘宝，京东，花瓣，美丽说...

相关概念：

• 网页可视区宽（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")))){
    //相应的处理...
}