网站地图
【www.gdgbn.com--jquery】
现在这种图片加载延迟的效果主要是应用在图片比较多的站点了，像taobao这种商城类的，这个可以节省不少带宽资源，今天 我们就来讲讲如何利用jquery lazyload组件来实现只加载可视区域图片面。
lazyload的难点在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)。因此我们需要知道几点信息来确定目标是否已呈现在客户区,其中包括：
可视区域相对于浏览器顶端位置；
待加载资源相对于浏览器顶端位置。
在得到以上两点数据后，通过如下函数，便可得出某对象是否在
// 返回浏览器的可视区域位置
function getclient(){
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 getsubclient(p){
var l = 0, t = 0, w, h;
w = p.offsetwidth;
h = p.offsetheight;
while(p.offsetparent){
l += p.offsetleft;
t += p.offsettop;
p = p.offsetparent;
}
return { left: l, top: t, width: w, height: h };
}
其中 函数getclient()返回浏览器客户区区域信息，getsubclient()返回目标模块区域信息。此时确定目标模块是否出现在客户区实际上是确定如上两个矩形是否相交。
代码如下:
// 判断两个矩形是否相交,返回一个布尔值
function intens(rec1, rec2){
var lc1, lc2, tc1, tc2, w1, h1;
lc1 = rec1.left + rec1.width / 2;
lc2 = rec2.left + rec2.width / 2;
tc1 = rec1.top + rec1.height / 2 ;
tc2 = rec2.top + rec2.height / 2 ;
w1 = (rec1.width + rec2.width) / 2 ;
h1 = (rec1.height + rec2.height) / 2;
return math.abs(lc1 - lc2) < w1 && math.abs(tc1 - tc2) < h1 ;
}
现在基本上可以实现延时加载了，接下来，我们在window.onscroll事件中编写一些代码监控目标区域是否呈现在客户区。
代码如下:
代码如下:
var div1 = document.getelementbyid("div1");
window.onscroll = function(){
var prec1 = getclient();
var prec2 = getsubclient(div1);
if (intens(prec1, prec2)) {
alert("true");
}
};
我们只需要在弹出窗口的地方加载我们需要的资源。
这里值得注意的是 : 目标对象呈现在客户区域时，会随着滚动而不断的弹出窗口。因此我们需要在弹出第一个窗口后取消对该区域的监测，这里用一个数组来收集需要监测的对象,同时将监测的逻辑抽出来。同时需要注意 onscroll事件和onresize事件都会改变游览器可视区域信息，因此在该类事件触发后需要重新计算，这里用autocheck()函数实现。
增加元素 :
代码如下:
代码如下:
// 比较某个子区域是否呈现在浏览器区域
function jiance(arr, prec1, callback){
var prec2;
for (var i = arr.length - 1; i >= 0; i--) {
if (arr[i]) {
prec2 = getsubclient(arr[i]);
if (intens(prec1, prec2)) {
callback(arr[i]);
// 加载资源后，删除监测
delete arr[i];
}
}
}
}
代码如下:
// 检测目标对象是否出现在客户区
function autocheck(){
var prec1 = getclient();
jiance(arr, prec1, function(obj){
// 加载资源...
alert(obj.innerhtml);
})
}
// 子区域一
var d1 = document.getelementbyid("d1");
// 子区域二
var d2 = document.getelementbyid("d2");
// 需要按需加载区域集合
var arr = [d1, d2];
window.onscroll = function(){
// 重新计算
autocheck();
}
window.onresize = function(){
// 重新计算
autocheck();
}
总结：经过上面分析就是判断用户现在x，y再判断所在可视区别的图片，加载就ko了。