- 相關(guān)推薦
jquery lazyload延遲加載的實(shí)現原理分析
前言
懶加載技術(shù)(簡(jiǎn)稱(chēng)lazyload)并不是新技術(shù)，它是js程序員對網(wǎng)頁(yè)性能優(yōu)化的一種方案。lazyload的核心是按需加載。在大型網(wǎng)站中都有lazyload的身影，例如谷歌的圖片搜索頁(yè)，迅雷首頁(yè)，淘寶網(wǎng)，QQ空間等。因此掌握l(shuí)azyload技術(shù)是個(gè)不錯的選擇，可惜jquery插件lazy load官網(wǎng)(http://www.appelsiini.net/projects/lazyload)稱(chēng)不支持新版瀏覽器。
lazyload在什么場(chǎng)合中應用比較合適?
涉及到圖片，falsh資源，iframe，網(wǎng)頁(yè)編輯器(類(lèi)似FCK)等占用較大帶寬，且這些模塊暫且不在瀏覽器可視區內，因此可以使用lazyload在適當的時(shí)候加載該類(lèi)資源。避免網(wǎng)頁(yè)打開(kāi)時(shí)加載過(guò)多資源，讓用戶(hù)等待太久。
如何實(shí)現lazyload?
lazyload的難點(diǎn)在如何在適當的時(shí)候加載用戶(hù)需要的資源(這里用戶(hù)需要的資源指該資源呈現在瀏覽器可視區域)。因此我們需要知道幾點(diǎn)信息來(lái)確定目標是否已呈現在客戶(hù)區,其中包括：
可視區域相對于瀏覽器頂端位置； 待加載資源相對于瀏覽器頂端位置。
在得到以上兩點(diǎn)數據后，通過(guò)如下函數，便可得出某對象是否在瀏覽器可視區域了。
返回瀏覽器的可視區域位置
復制代碼 代碼如下:
// 返回瀏覽器的可視區域位置
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()返回瀏覽器客戶(hù)區區域信息，getSubClient()返回目標模塊區域信息。此時(shí)確定目標模塊是否出現在客戶(hù)區實(shí)際上是確定如上兩個(gè)矩形是否相交。
復制代碼 代碼如下:
// 判斷兩個(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 ;
}
現在基本上可以實(shí)現延時(shí)加載了，接下來(lái)，我們在window.onscroll事件中編寫(xiě)一些代碼監控目標區域是否呈現在客戶(hù)區。
復制代碼 代碼如下:
復制代碼 代碼如下:
var div1 = document.getElementById("div1");
window.onscroll = function(){
var prec1 = getClient();
var prec2 = getSubClient(div1);
if (intens(prec1, prec2)) {
alert("true");
}
};
我們只需要在彈出窗口的地方加載我們需要的資源。
這里值得注意的是 : 目標對象呈現在客戶(hù)區域時(shí)，會(huì )隨著(zhù)滾動(dòng)而不斷的彈出窗口。因此我們需要在彈出第一個(gè)窗口后取消對該區域的監測，這里用一個(gè)數組來(lái)收集需要監測的對象,同時(shí)將監測的邏輯抽出來(lái)。同時(shí)需要注意 onscroll事件和onresize事件都會(huì )改變游覽器可視區域信息，因此在該類(lèi)事件觸發(fā)后需要重新計算，這里用autocheck()函數實(shí)現。
增加元素 :
復制代碼 代碼如下:
復制代碼 代碼如下:
// 比較某個(gè)子區域是否呈現在瀏覽器區域
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]);
// 加載資源后，刪除監測
arr[i];
}
}
}
}
復制代碼 代碼如下:
// 檢測目標對象是否出現在客戶(hù)區
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();
}
【jquery lazyload延遲加載的實(shí)現原理分析】相關(guān)文章：
關(guān)于jQuery實(shí)現高亮顯示的方法介紹08-20
jQuery 源碼分析和Ready函數06-28
微軟Windows 7系統開(kāi)機加載過(guò)程的原理和機制05-18
探討PHP函數的實(shí)現原理及性能07-07
php中session的實(shí)現原理以及大網(wǎng)站應用應注意的問(wèn)題分析07-26
關(guān)jQuery彈出窗口簡(jiǎn)單實(shí)現代碼-javascript編程06-07
關(guān)于jquery簡(jiǎn)單圖片切換顯示效果實(shí)現方法介紹10-01
營(yíng)銷(xiāo)策略相關(guān)原理分析10-10
執行sql原理l分析05-12