如何實現lazyload的圖片延遲加載功能
lazyload的難點在如何在適當的時候加載用戶需要的資源(這裡用戶需要的資源指該資源呈現在浏覽器可視區域)
在得到以上兩點數據後
//返回浏覽器的可視區域位置
function getclient(){
var lt w h;
l = documentdocumentelement scrollleft || document body scrollleft;
t = documentdocumentelement scrolltop || document body scrolltop;
w = documentdocumentelement clientwidth;
h = documentdocumentelement clientheight;
return {left :l top :t width :w height :h} ;
}//返回待
加載資源位置
function getsubclient(p){
var l =t = w h;
w = poffsetwidth ;
h = poffsetheight; while(p
offsetparent){
l += poffsetleft ;
t += poffsettop ;
p = poffsetparent;
}return {
left :l top :t width :w height :h } ;
}
其中 函數 getclient()返回浏覽器客戶區區域信息
//判斷兩個矩形是否相交
function intens(recrec ){
var lclc tc tc w h ;
lc= rec left + rec width / ;
lc= rec left + rec width / ;
tc= rec top + rec height / ;
tc= rec top + rec height / ;
w= (rec width + rec width) / ;
h= (rec height + rec height) / ;
return mathabs(lc lc ) < w && math abs(tc tc ) < h ;
}
From:http://tw.wingwit.com/Article/program/Java/hx/201405/30807.html