LazyLoad 延迟加载(按需加载)_javascript技巧
程序员文章站
2022-06-01 19:53:23
...
1：实际需求
大型网站往往很矛盾，想用户在首页看到更多东西，又不想浪费太多服务器流量。比如一个有3屏的首页。可能50%的用户进首页的目的是点击首页的连接，到子页面。
那么我们的网站却为100%的用户加载了 3个 屏幕的所有内容。如果可以按需加载内容。就可以节约更多资源，做更多好的应用。
2：解决方案
用客户端语言来判断用户当前的可视范围，只加载用户可视范围的内容。最主要的是图片。因为文字信息，相对较小，其他多媒体内容相对占用服务器流量更多。
3：演示例子(最后提供)
4：解析
首先我们要分析下，这个效果会有一个 最外面的容器。他包涵了里面需要延迟加载一些内容。容器一般可能是浏览器窗口本身(window)，或者一个有滚动条的DIV。
OK，我们必须获取这个容器的一些参数。比如 可视宽度，可视高度，水平卷去宽度，垂直卷去高度。我使用下面的程序。
4.1：获取容器对象属性
_this.docInfo=function(){//获取容器的相关信息
var d={},db= (wf)? document.body : warpper,
dd=(wf) ? document.documentElement : warpper;
if(sys.ie){
d.offh=dd.offsetHeight;//可视区域H
d.offw=dd.offsetWidth;//可视区域W
}else{
if(wf){
d.offw=window.innerWidth;//可视区域H
d.offh=window.innerHeight;//可视区域W
}else{
d.offh=dd.offsetHeight;//可视区域H
d.offw=dd.offsetWidth;//可视区域W
}
}
d.jtop=(wf) ? db.scrollTop+dd.scrollTop : db.scrollTop ;//垂直卷去高度
d.jleft=(wf) ? db.scrollLeft+dd.scrollLeft : db.scrollLeft;//水平卷去宽度
//被卷去的宽度 window 使用两个相加 div的卷曲就直接使用scrollLeft就OK
$j("bbb").innerHTML=d.offh+','+d.offw+','+d.jtop+','+d.jleft
return d;
}
//注意在非IE 浏览器下 获取非window对象的可视区域 使用offsetHeight 和 offsetWidth （跟IE 一样）
//在非IE 下获取 window对象的可视区域 则要使用 window.innerWidth 和window.innerHeight
//也就是说在非IE 下的 window 和 非window 对象的 可视区域获取是不一样的。
4.2:获取加载内容的信息
我们主要获取加载对象距离 页面容器对象的距离 。
IE 6 7会有个BUG
wtop=sys.ie ? (sys.ie[1]=='6.0' || sys.ie[1]=='7.0') ? 0 : warpper.offsetTop : warpper.offsetTop,
wleft=sys.ie ? (sys.ie[1]=='6.0' || sys.ie[1]=='7.0') ? 0 : warpper.offsetLeft : warpper.offsetLeft,
getoff=function(o){//获取IMG对象的 offw and offh
o.innerHTML=(o.offsetTop-wtop) +','+ (o.offsetLeft-wleft);
return (o.offsetTop-wtop) +','+ (o.offsetLeft-wleft);
//注意 o.offsetTop 在chrome下要等window.onload以后才能正确获取
};
4.3:加载主程序
他主要负责加载当前在可视范围内对象。那么我们必须去遍历所有要加载的对象。判断对象是否在当前的加载中。
然后加载他。我下面会有一个图。（方法可能不太好）
_this.Load=function(){
var hereline=[];
hereline[1]=doc.offh+doc.jtop;
hereline[2]=doc.offw+doc.jleft;
for(i=0;iif(imgs[i][1] != undefined){//判断当前对象是否已经加载过
var jj=hereline[1] - imgs[i][1] 0 ? true : false,
jjj=hereline[2] - imgs[i][2] 0 ? true : false;
if(jj && jjj){
imgall[i].innerHTML+='第'+(++j)+'个加载';
imgs[i][1]=undefined;
}
}
}
if( j >= imgs.length){//判断是否已经全部加载完毕
//取消时间绑定
alert("已经全部加载完成，程序将不再执行")
warpper.onscroll=null;
warpper.onresize=null;
}
}
我不太喜欢我的判断程序，但是暂时没找到，或者我没理解更好的算法。所以就先用这个了。
大体的意思：用容器的可视高度+容器滚动高度 - 对象距离距离容器距离 > 容器可视 + 对象本身高或宽 就证明在加载范围。（绕口令）
我们还必须把 已经加载过的对象排除在外。因为加载过的对象也满足以上公式，同时也可以少判断一些。
imgs[i][1]=undefined;
if(imgs[i][1] != undefined){//判断当前对象是否已经加载过
特别注意（看图）
看上图 A B C D。 分别有4个不同的角露在了 可视范围内。所以这4个对象是需要加载的。
如果只考虑对象的某个点，或者某个线来判断对象是否在可视范围，可能带来不好的体验。
由于有上面这种情况，也给我们的编程（判断是否在可视范围内）增加了难度。
我上面的方法，是可以完成了。（如果有发现BUG ，请给我指点。其实我也有点晕了。）
最后还有几个技巧，比如
1：对象全部加载完了。就应该去掉容器对象事件触发。
2：尽量优化判断对象是否在可视范围，或者遍历的对象的算法。可以节约很多浏览器资源。
3：cloudgamer 还提到一个 延迟触发，就是快速的滑动滚动条，延迟一下也是一个小的优化。
5：推荐文章
cloudgamer 的 他讲的很详细，也比我做的要好。所以推荐去学习他的这个效果哦。很多东西我也借鉴他的。
还有就是感谢他的指点。 Lazyload 延迟加载效果
6:我的源码
lazyload
大型网站往往很矛盾，想用户在首页看到更多东西，又不想浪费太多服务器流量。比如一个有3屏的首页。可能50%的用户进首页的目的是点击首页的连接，到子页面。
那么我们的网站却为100%的用户加载了 3个 屏幕的所有内容。如果可以按需加载内容。就可以节约更多资源，做更多好的应用。
2：解决方案
用客户端语言来判断用户当前的可视范围，只加载用户可视范围的内容。最主要的是图片。因为文字信息，相对较小，其他多媒体内容相对占用服务器流量更多。
3：演示例子(最后提供)
4：解析
首先我们要分析下，这个效果会有一个 最外面的容器。他包涵了里面需要延迟加载一些内容。容器一般可能是浏览器窗口本身(window)，或者一个有滚动条的DIV。
OK，我们必须获取这个容器的一些参数。比如 可视宽度，可视高度，水平卷去宽度，垂直卷去高度。我使用下面的程序。
4.1：获取容器对象属性
复制代码 代码如下:
_this.docInfo=function(){//获取容器的相关信息
var d={},db= (wf)? document.body : warpper,
dd=(wf) ? document.documentElement : warpper;
if(sys.ie){
d.offh=dd.offsetHeight;//可视区域H
d.offw=dd.offsetWidth;//可视区域W
}else{
if(wf){
d.offw=window.innerWidth;//可视区域H
d.offh=window.innerHeight;//可视区域W
}else{
d.offh=dd.offsetHeight;//可视区域H
d.offw=dd.offsetWidth;//可视区域W
}
}
d.jtop=(wf) ? db.scrollTop+dd.scrollTop : db.scrollTop ;//垂直卷去高度
d.jleft=(wf) ? db.scrollLeft+dd.scrollLeft : db.scrollLeft;//水平卷去宽度
//被卷去的宽度 window 使用两个相加 div的卷曲就直接使用scrollLeft就OK
$j("bbb").innerHTML=d.offh+','+d.offw+','+d.jtop+','+d.jleft
return d;
}
//注意在非IE 浏览器下 获取非window对象的可视区域 使用offsetHeight 和 offsetWidth （跟IE 一样）
//在非IE 下获取 window对象的可视区域 则要使用 window.innerWidth 和window.innerHeight
//也就是说在非IE 下的 window 和 非window 对象的 可视区域获取是不一样的。
4.2:获取加载内容的信息
我们主要获取加载对象距离 页面容器对象的距离 。
IE 6 7会有个BUG
复制代码 代码如下:
wtop=sys.ie ? (sys.ie[1]=='6.0' || sys.ie[1]=='7.0') ? 0 : warpper.offsetTop : warpper.offsetTop,
wleft=sys.ie ? (sys.ie[1]=='6.0' || sys.ie[1]=='7.0') ? 0 : warpper.offsetLeft : warpper.offsetLeft,
复制代码 代码如下:
getoff=function(o){//获取IMG对象的 offw and offh
o.innerHTML=(o.offsetTop-wtop) +','+ (o.offsetLeft-wleft);
return (o.offsetTop-wtop) +','+ (o.offsetLeft-wleft);
//注意 o.offsetTop 在chrome下要等window.onload以后才能正确获取
};
4.3:加载主程序
他主要负责加载当前在可视范围内对象。那么我们必须去遍历所有要加载的对象。判断对象是否在当前的加载中。
然后加载他。我下面会有一个图。（方法可能不太好）
复制代码 代码如下:
_this.Load=function(){
var hereline=[];
hereline[1]=doc.offh+doc.jtop;
hereline[2]=doc.offw+doc.jleft;
for(i=0;i
var jj=hereline[1] - imgs[i][1] 0 ? true : false,
jjj=hereline[2] - imgs[i][2] 0 ? true : false;
if(jj && jjj){
imgall[i].innerHTML+='第'+(++j)+'个加载';
imgs[i][1]=undefined;
}
}
}
if( j >= imgs.length){//判断是否已经全部加载完毕
//取消时间绑定
alert("已经全部加载完成，程序将不再执行")
warpper.onscroll=null;
warpper.onresize=null;
}
}
我不太喜欢我的判断程序，但是暂时没找到，或者我没理解更好的算法。所以就先用这个了。
大体的意思：用容器的可视高度+容器滚动高度 - 对象距离距离容器距离 > 容器可视 + 对象本身高或宽 就证明在加载范围。（绕口令）
我们还必须把 已经加载过的对象排除在外。因为加载过的对象也满足以上公式，同时也可以少判断一些。
imgs[i][1]=undefined;
if(imgs[i][1] != undefined){//判断当前对象是否已经加载过
特别注意（看图）
看上图 A B C D。 分别有4个不同的角露在了 可视范围内。所以这4个对象是需要加载的。
如果只考虑对象的某个点，或者某个线来判断对象是否在可视范围，可能带来不好的体验。
由于有上面这种情况，也给我们的编程（判断是否在可视范围内）增加了难度。
我上面的方法，是可以完成了。（如果有发现BUG ，请给我指点。其实我也有点晕了。）
最后还有几个技巧，比如
1：对象全部加载完了。就应该去掉容器对象事件触发。
2：尽量优化判断对象是否在可视范围，或者遍历的对象的算法。可以节约很多浏览器资源。
3：cloudgamer 还提到一个 延迟触发，就是快速的滑动滚动条，延迟一下也是一个小的优化。
5：推荐文章
cloudgamer 的 他讲的很详细，也比我做的要好。所以推荐去学习他的这个效果哦。很多东西我也借鉴他的。
还有就是感谢他的指点。 Lazyload 延迟加载效果
6:我的源码
复制代码 代码如下:
推荐阅读