jquery lazyload延遲加載的實現(xiàn)原理分析

時間：2024-09-09 01:33:59 jQuery 我要投稿

相關(guān)推薦

　　前言

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

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

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

　　如何實現(xiàn)lazyload?

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

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

　　在得到以上兩點數(shù)據(jù)后，通過如下函數(shù)，便可得出某對象是否在瀏覽器可視區(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ū)域信息。此時確定目標(biāo)模塊是否出現(xiàn)在客戶區(qū)實際上是確定如上兩個矩形是否相交。

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

　　// 判斷兩個矩形是否相交,返回一個布爾值

　　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)在基本上可以實現(xiàn)延時加載了，接下來，我們在window.onscroll事件中編寫一些代碼監(jiān)控目標(biāo)區(qū)域是否呈現(xiàn)在客戶區(qū)。

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

　　var div1 = document.getElementById("div1");

　　window.onscroll = function(){

　　var prec1 = getClient();

　　var prec2 = getSubClient(div1);

　　if (intens(prec1, prec2)) {

　　alert("true");

　　}

　　};

　　我們只需要在彈出窗口的地方加載我們需要的資源。

　　這里值得注意的是 : 目標(biāo)對象呈現(xiàn)在客戶區(qū)域時，會隨著滾動而不斷的彈出窗口。因此我們需要在彈出第一個窗口后取消對該區(qū)域的監(jiān)測，這里用一個數(shù)組來收集需要監(jiān)測的對象,同時將監(jiān)測的邏輯抽出來。同時需要注意 onscroll事件和onresize事件都會改變游覽器可視區(qū)域信息，因此在該類事件觸發(fā)后需要重新計算，這里用autocheck()函數(shù)實現(xiàn)。

　　增加元素 :

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

　　// 比較某個子區(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)測

　　 arr[i];