懒加载剖析

懒加载:

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

应用懒加载的网站:

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

相关概念:

  • 网页可视区宽(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.offsetRigthelement.offsetBottom属性;
懒加载剖析_第1张图片
获取定位值

宽高写法相同,不一一列举;

应用场景:

涉及到图片,falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽,且这些模块暂且不在浏览器可视区内,因此可以使用懒加载技术在某个模块容器到达了网页可见区域时,再使用ajax异步请求将请求内容渲染出来,避免网页打开时加载过多资源,让用户等待太久。

判断模块是否进入可视区:

当用户浏览到首屏之外的其他模块,也就是其他模块进入可视区时,异步加载进而渲染资源到页面。
因此实现懒加载的关键点是判断模块是否进入可视区,也可以把可视区理解成一个模块,首屏外的内容为一个模块,当两个模块发生碰撞时即需是加载资源的时机。
盗一张图解释说明下两个模块的临界点:

懒加载剖析_第2张图片
判断模块是否进入视口

引入一个公式,以图二中的两个模块为例:

    //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")))){
    //相应的处理...
}

你可能感兴趣的:(懒加载剖析)