jquery lazyload延遲加載技術(shù)的實(shí)現(xiàn)原理分析

更新時(shí)間：2011年01月24日 20:07:52 作者：

前言

懶加載技術(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)稱不支持新版瀏覽器。

lazyload在什么場(chǎng)合中應(yīng)用比較合適?

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

如何實(shí)現(xiàn)lazyload?

lazyload的難點(diǎn)在如何在適當(dāng)?shù)臅r(shí)候加載用戶需要的資源(這里用戶需要的資源指該資源呈現(xiàn)在瀏覽器可視區(qū)域)。因此我們需要知道幾點(diǎn)信息來(lái)確定目標(biāo)是否已呈現(xiàn)在客戶區(qū),其中包括：

可視區(qū)域相對(duì)于瀏覽器頂端位置；
待加載資源相對(duì)于瀏覽器頂端位置。

在得到以上兩點(diǎn)數(shù)據(jù)后，通過(guò)如下函數(shù)，便可得出某對(duì)象是否在瀏覽器可視區(qū)域了。
返回瀏覽器的可視區(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 }; 
} 

返回待加載資源位置

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

 
// 返回待加載資源位置 
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è)趙indow.onscroll事件中編寫一些代碼監(jiān)控目標(biāo)區(qū)域是否呈現(xiàn)在客戶區(qū)。

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

 
<div style="width:100px; height:3000px"></div> 
<div id="div1" style="width:50px; height:50px; background:red; position:absolute; top:1000px"> 
</div> 

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

 
var div1 = document.getElementById("div1"); 
window.onscroll = function(){ 
var prec1 = getClient(); 
var prec2 = getSubClient(div1); 
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ì)象,同時(shí)將監(jiān)測(cè)的邏輯抽出來(lái)。同時(shí)需要注意 onscroll事件和onresize事件都會(huì)改變游覽器可視區(qū)域信息，因此在該類事件觸發(fā)后需要重新計(jì)算，這里用autocheck()函數(shù)實(shí)現(xiàn)。
增加元素 :

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

 
<div id="div2" 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]; 
} 
} 
} 
} 

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

 
// 檢測(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(); 
} 