一段實現頁面上的圖片延時加載的js

http://www.inspirr.com

---

;
var download_count = 0;
var last_offset = -1;
var doc_body;
var doc_element;
var lazy_load_tag;
function initVar {
doc_body = document.body;
doc_element = document.compatMode == 'BackCompat' ? doc_body: document.documentElement;
lazy_load_tag = tags || ["img", "iframe"];
};
function initElementMap {
var all_element = [];
//從所有相關元素中找出需要延時加載的元素
for {
var el = document.getElementsByTagName;
for {
if == "object" && el[j].getAttribute) {
element_obj.push;
}
}
}

for {
var o_img = element_obj[i];
var t_index = getAbsoluteTop;//得到圖片相對document的距上距離
if {
map_element[t_index].push;
} else {
//按距上距離保存一個隊列
var t_array = [];
t_array[0] = i;
map_element[t_index] = t_array;
download_count++;//需要延時加載的圖片數量
}
}

};
function initDownloadListen {
if return;
var offset = ? doc_body.scrollTop: doc_element.scrollTop;
//可視化區域的offtset=document的高+
var visio_offset = offset + doc_element.clientHeight;
if {
setTimeout;
return;
}
last_offset = visio_offset;
var visio_height = doc_element.clientHeight;
var img_show_height = visio_height + offset;
for {
if {
var t_o = map_element[key];
var img_vl = t_o.length;
for {
element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute;
}
delete map_element[key];
download_count--;
}
}
setTimeout;
};
function getAbsoluteTop {
if {
return null;
}
var offsetTop = element.offsetTop;
while {
offsetTop element.offsetTop;
}
return offsetTop;
}
function init {
initVar;
initElementMap;
initDownloadListen;
};
return {
init: init
}
});
使用方法：把頁面上需要延時加載的圖片src改成為lazy_src，然后把上面的js放到body最后面，然后調用：lazyLoad.init;
調戲的方法可以使用firebug來查看一時圖片是否是延時加載。
另外：
如果你的頁面上存在有內容切換的欄目的話，可能在切換時切換的內容里的圖片可能會不顯示，處理的方法是在內容時單獨圖片加載處理，如：

///切換內容的代碼... chlid.find.each{ $.attr.attr); $.removeAttr; });

  Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |