快捷導(dǎo)航

javascript 延遲加載技術(shù)(lazyload)簡(jiǎn)單實(shí)現(xiàn)

更新時(shí)間：2011年01月17日 22:12:36 作者：

延遲加載技術(shù)(簡(jiǎn)稱lazyload)并不是新技術(shù), 它是js程序員對(duì)網(wǎng)頁(yè)性能優(yōu)化的一種方案.

1.前言
　　懶加載技術(shù)(簡(jiǎn)稱lazyload)并不是新技術(shù), 它是js程序員對(duì)網(wǎng)頁(yè)性能優(yōu)化的一種方案.lazyload的核心是按需加載.在大型網(wǎng)站中都有l(wèi)azyload的身影,例如谷歌的圖片搜索頁(yè),迅雷首頁(yè)，淘寶網(wǎng),QQ空間等.因此掌握l(shuí)azyload技術(shù)是個(gè)不錯(cuò)的選擇,可惜jquery插件lazy load官網(wǎng)(http://www.appelsiini.net/projects/lazyload)稱不支持新版瀏覽器。

2.lazyload在什么場(chǎng)合中應(yīng)用比較合適?
　　涉及到圖片，falsh資源 , iframe, 網(wǎng)頁(yè)編輯器(類似FCK)等占用較大帶寬，且這些模塊暫且不在瀏覽器可視區(qū)內(nèi),因此可以使用lazyload在適當(dāng)?shù)臅r(shí)候加載該類資源.避免網(wǎng)頁(yè)打開(kāi)時(shí)加載過(guò)多資源，讓用戶等待太久.

3.如何實(shí)現(xiàn)lazyload?
　　lazyload的難點(diǎn)在如何在適當(dāng)?shù)臅r(shí)候加載用戶需要的資源(這里用戶需要的資源指該資源呈現(xiàn)在瀏覽器可視區(qū)域)。因此我們需要知道幾點(diǎn)信息來(lái)確定目標(biāo)是否已呈現(xiàn)在客戶區(qū),其中包括：
　　　　1.可視區(qū)域相對(duì)于瀏覽器頂端位置
　　　　2.待加載資源相對(duì)于瀏覽器頂端位置.
　　在得到以上兩點(diǎn)數(shù)據(jù)后，通過(guò)如下函數(shù)，便可得出某對(duì)象是否在瀏覽器可視區(qū)域了.

復(fù)制代碼代碼如下:

 
　　//返回瀏覽器的可視區(qū)域位置 
　　 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 } ; 
} 

　　其中函數(shù) getClient()返回瀏覽器客戶區(qū)區(qū)域信息,getSubClient()返回目標(biāo)模塊區(qū)域信息。此時(shí)確定目標(biāo)模塊是否出現(xiàn)在客戶區(qū)實(shí)際上是確定如上兩個(gè)矩形是否相交.

復(fù)制代碼代碼如下:

 
　　//判斷兩個(gè)矩形是否相交,返回一個(gè)布爾值 
　　 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 ; 
　　 } 

　　現(xiàn)在基本上可以實(shí)現(xiàn)延時(shí)加載了，接下來(lái),我們?cè)?window.onscroll 事件中編寫(xiě)一些代碼監(jiān)控目標(biāo)區(qū)域是否呈現(xiàn)在客戶區(qū).

復(fù)制代碼代碼如下:

 
　　<div style = "width:100px; height:3000px"></div> 
　　<div id = "d1" style = "width:50px; height:50px; background:red;position:absolute; top:1000px"> 
　　</div> 
　　 var d1 = document.getElementById("d1"); 
　　 window.onscroll = function(){ 
　　 　　var prec1 = getClient(); 
　　　　var prec2 = getSubClient(d1); 
　　　　　if(intens(prec1,prec2)){ 
　　 　　　　alert("true") 
　　 　 　　} 
　　} 

　　我們只需要在彈出窗口的地方加載我們需要的資源.
　　這里值得注意的是:目標(biāo)對(duì)象呈現(xiàn)在客戶區(qū)域時(shí)，會(huì)隨著滾動(dòng)而不斷的彈出窗口.因此我們需要在彈出第一個(gè)窗口后取消對(duì)該區(qū)域的監(jiān)測(cè),這里用一個(gè)數(shù)組來(lái)收集需要監(jiān)測(cè)的對(duì)象。還需要注意:因?yàn)閛nscroll事件和onresize事件都會(huì)改變游覽器可視區(qū)域信息,因此在該類事件觸發(fā)后需要重新計(jì)算目標(biāo)對(duì)象是否在可視區(qū)域,這里用autocheck()函數(shù)實(shí)現(xiàn).(迅雷首頁(yè)的lazyload沒(méi)有在onresize事件中重新計(jì)算目標(biāo)對(duì)象是否在瀏覽器可視區(qū)域,因此如果先將瀏覽器窗口縮小到一定尺寸后滾動(dòng)到需要加載圖片的區(qū)域后點(diǎn)擊最大化，圖片加載不出來(lái)，呵呵，以后需要注意了).

　　增加元素:<div id = "d2" style = "width:50px; height:50px; background:blue;position:absolute; top:2500px">

復(fù)制代碼代碼如下:

 
　　 //比較某個(gè)子區(qū)域是否呈現(xiàn)在瀏覽器區(qū)域 
　　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]); 
　　　　　　 //加載資源后，刪除監(jiān)測(cè) 
　　　　 　　 delete arr[i]; 
　　　　　　} 
　　　　} 
　　　} 
　　} 
　　//檢測(cè)目標(biāo)對(duì)象是否出現(xiàn)在客戶區(qū) 
　　function autocheck(){ 
　　　　 var prec1 = getClient(); 
　　　　jiance(arr,prec1,function(obj){ 
　　　　　　//加載資源... 
　　　　 alert(obj.innerHTML) 
　　　　}) 
　　} 
　　//子區(qū)域一 
　　 var d1 = document.getElementById("d1"); 
　　 //子區(qū)域二 
　　var d2 = document.getElementById("d2"); 
　　 //需要按需加載區(qū)域集合 
　　var arr = [d1,d2]; 
　　 window.onscroll = function(){ 
　　　　 //重新計(jì)算 
　　　　 autocheck(); 
　　} 
　　window.onresize = function(){ 
　　　　 //重新計(jì)算 
　　　　 autocheck(); 
　　} 