1.前言
懶載入技術(簡稱lazyload)並不是新技術, 它是js程式員對網頁效能最佳化的一種方案.lazyload的核心是按需載入.在大型網站中都有lazyload的身影,例如Google的圖片搜尋網頁,迅雷首頁，淘寶網,QQ空間等.因此掌握lazyload技術是個不錯的選擇,可惜jquery外掛程式lazy load官網(http://www.appelsiini.net/projects/lazyload)稱不支援新版瀏覽器。
2.lazyload在什麼場合中應用比較合適?
涉及到圖片，falsh資源 , iframe, 網頁編輯器(類似FCK)等佔用較大頻寬，且這些模組暫且不在瀏覽器可視區內,因此可以使用lazyload在適當的時候載入該類資源.避免網頁開啟時載入過多資源，讓使用者等待太久.
3.如何?lazyload?
lazyload的痛點在如何在適當的時候載入使用者需要的資源(這裡使用者需要的資源指該資源呈現在瀏覽器可視地區)。因此我們需要知道幾點資訊來確定目標是否已呈現在客戶區,其中包括：
1.可視地區相對於瀏覽器頂端位置
2.待載入資源相對於瀏覽器頂端位置.
在得到以上兩點資料後，通過如下函數，便可得出某對象是否在瀏覽器可視地區了.
複製代碼 代碼如下:
//返回瀏覽器的可視地區位置
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()返回瀏覽器客戶區地區資訊,getSubClient()返回目標模組地區資訊。此時確定目標模組是否出現在客戶區實際上是確定如上兩個矩形是否相交.
複製代碼 代碼如下:
//判斷兩個矩形是否相交,返回一個布爾值
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 ;
}
現在基本上可以實現延時載入了，接下來,我們在 window.onscroll 事件中編寫一些代碼監控目的地區域是否呈現在客戶區.
複製代碼 代碼如下:
<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")
}
}
我們只需要在快顯視窗的地方載入我們需要的資源.
這裡值得注意的是:目標對象呈現在用戶端區域時，會隨著滾動而不斷的快顯視窗.因此我們需要在彈出第一個視窗後取消對該地區的監測,這裡用一個數組來收集需要監測的對象。還需要注意:因為onscroll事件和onresize事件都會改變遊覽器可視地區資訊,因此在該類事件觸發後需要重新計算目標對象是否在可視地區,這裡用autocheck()函數實現.(迅雷首頁的lazyload沒有在onresize事件中重新計算目標對象是否在瀏覽器可視地區,因此如果先將瀏覽器視窗縮小到一定尺寸後滾動到需要載入圖片的地區後點擊最大化，圖片載入不出來，呵呵，以後需要注意了).
增加元素:<div id = "d2" style = "width:50px; height:50px; background:blue;position:absolute; top:2500px">
複製代碼 代碼如下:
//比較某個子領域是否呈現在瀏覽器地區
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]);
//載入資源後，刪除監測
delete arr[i];
}
}
}
}
//檢測目標對象是否出現在客戶區
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();
}
現在我們只需要在彈窗的地方載入我們需要的資源了.源碼就不貼出來了.如果需要的朋友,或著存在疑問的地方,可以聯絡我.
