建站
咨詢
售后
建站咨詢
新聞中心
懶加載技術(shù)(簡稱lazyload)并不是新技術(shù), 它是javascript程序員對網(wǎng)頁性能優(yōu)化的一種方案.lazyload的核心是按需加載.在大型網(wǎng)站中都有l(wèi)azyload的身影,例如谷歌的圖片搜索頁,迅雷首頁，淘寶網(wǎng),QQ空間等.因此掌握lazyload技術(shù)是個(gè)不錯(cuò)的選擇,可惜jquery插件lazy load官網(wǎng)(http://www.appelsiini.net/projects/lazyload)稱不支持新版瀏覽器。
1.lazyload在什么場合中應(yīng)用比較合適?
涉及到圖片，falsh資源 , iframe, 網(wǎng)頁編輯器(類似FCK)等占用較大帶寬，且這些模塊暫且不在瀏覽器可視區(qū)內(nèi),因此可以使用lazyload在適當(dāng)?shù)臅r(shí)候加載該類資源.避免網(wǎng)頁打開時(shí)加載過多資源，讓用戶等待太久.
2.如何實(shí)現(xiàn)lazyload?
lazyload的難點(diǎn)在如何在適當(dāng)?shù)臅r(shí)候加載用戶需要的資源(這里用戶需要的資源指該資源呈現(xiàn)在瀏覽器可視區(qū)域)。因此我們需要知道幾點(diǎn)信息來確定目標(biāo)是否已呈現(xiàn)在客戶區(qū),其中包括：
1.可視區(qū)域相對于瀏覽器頂端位置
2.待加載資源相對于瀏覽器頂端位置.
在得到以上兩點(diǎn)數(shù)據(jù)后，通過如下函數(shù)，便可得出某對象是否在瀏覽器可視區(qū)域了.
- //返回瀏覽器的可視區(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è)矩形是否相交.
- //判斷兩個(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í)加載了，接下來,我們在 window.onscroll 事件中編寫一些代碼監(jiān)控目標(biāo)區(qū)域是否呈現(xiàn)在客戶區(qū).
- "width:100px; height:3000px">
- "d1" style = "width:50px; height:50px; background:red;position:absolute; top:1000px">
- var d1 = document.getElementById("d1");
- window.onscroll = function(){
- var prec1 = getClient();
- var prec2 = getSubClient(d1);
- if(intens(prec1,prec2)){
- alert("true")
- }
- }
我們只需要在彈出窗口的地方加載我們需要的資源.
這里值得注意的是:目標(biāo)對象呈現(xiàn)在客戶區(qū)域時(shí)，會隨著滾動而不斷的彈出窗口.因此我們需要在彈出第一個(gè)窗口后取消對該區(qū)域的監(jiān)測,這里用一個(gè)數(shù)組來收集需要監(jiān)測的對象。還需要注意:因?yàn)閛nscroll事件和onresize事件都會改變游覽器可視區(qū)域信息,因此在該類事件觸發(fā)后需要重新計(jì)算目標(biāo)對象是否在可視區(qū)域,這里用autocheck()函數(shù)實(shí)現(xiàn).(迅雷首頁的lazyload沒有在onresize事件中重新計(jì)算目標(biāo)對象是否在瀏覽器可視區(qū)域,因此如果先將瀏覽器窗口縮小到一定尺寸后滾動到需要加載圖片的區(qū)域后點(diǎn)擊最大化，圖片加載不出來，呵呵，以后需要注意了).
增加元素:
- "d2" style = "width:50px; height:50px;
- background:blue;position:absolute;
- top:2500px">
- //比較某個(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)測
- delete arr[i];
- }
- }
- }
- }
- //檢測目標(biāo)對象是否出現(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();
- }
現(xiàn)在我們只需要在彈窗的地方加載我們需要的資源了.源碼就不貼出來了.如果需要的朋友,或著存在疑問的地方,可以聯(lián)系我.
原文鏈接：http://www.cnblogs.com/a_bu/archive/2011/01/16/1936989.html
【編輯推薦】
- 雙倍經(jīng)驗(yàn)助你升級 JavaScript編程最佳法則
- 提升JavaScript遞歸效率：Memoization技術(shù)詳解
- 揭秘JavaScript對Cookie的操作
新聞名稱：JavaScript懶加載技術(shù)(lazyload)簡單實(shí)現(xiàn)
網(wǎng)頁鏈接：http://m.5511xx.com/article/cccieho.html
