page_image 특수 효과에 이미지 지연 로드를 구현하는 js 코드 조각

lazyLoad=(function() {
var map_element = {};
var element_obj = [];
var download_count = -1;
var doc_element;
doc_element; = 'BackCompat' ? document.documentElement;
lazy_load_tag ​​​​= 태그 || ["img", "iframe"]
function initElementMap () {
var all_element = [];
//관련된 모든 요소 중에서 로드를 지연해야 하는 요소를 찾습니다.
for (var i = 0,
len =lazy_load_tag.length; i < len; i ) {
var el = document.getElementsByTagName(lazy_load_tag[i]);
for (var j = 0,
len2 = el.length; j < len2; j ) {
if (typeof(el [j]) == "객체" && el[j].getAttribute("lazy_src")) {
element_obj.push(all_element[key])
}
}
}

for (var i = 0,
len = element_obj.length; i < len; i ) {
var o_img = element_obj[i]
var t_index = getAbsoluteTop(o_img); //문서를 기준으로 이미지의 상단 거리를 가져옵니다
if (map_element[t_index]) {
map_element[t_index].push(i)
} else {
//저장 위의 거리에 따른 대기열
t_array[0] = i;
map_element[t_index] = t_array;
download_count;//사진 수 지연 필요
}
}

};
function initDownloadListen() {
if (!download_count) return
var offset = (window.MessageEvent && !document .getBoxObjectFor) ? .scrollTop: doc_element.scrollTop;//시각적 영역의 오프셋 = 문서의 높이
var visio_offset = offset doc_element.clientHeight
if (last_offset == visio_offset) {
setTimeout (initDownloadListen, 200);
return;
}
last_offset = visio_offset;
var visio_height = visio_height offset
for (map_element의 var 키 ) {
if (img_show_height > key) {
var t_o = map_element[key]
var img_vl = t_o.length;
for (var l = 0; l < img_vl; l ) {
element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src")
}
delete map_element[key]
download_count- ;
}
}
setTimeout(initDownloadListen, 200);
};
function getAbsoluteTop(element) {
if (arguments.length != 1 || element == null ) {
return null;
}
var offsetTop = element.offsetTop;
while (element = element.offsetParent) {
offsetTop = element.offsetTop;
반환 offsetTop;
}
function init(tags) {
initElementMap()
initDownloadListen()
return {
init: init
}
})();


사용법: 페이지 로딩을 지연시켜야 하는 이미지의 src를lazy_src로 변경한 후 위의 js를 넣어줍니다. 마지막에 다음을 호출하세요:lazyLoad.init();
놀리려면 Firebug를 사용하여 이미지 로딩이 지연되는지 확인할 수 있습니다.
추가:
페이지에 콘텐츠 전환이 있는 열이 있는 경우 전환 중에 콘텐츠의 이미지가 표시되지 않을 수 있습니다. 해결 방법은 다음과 같이 콘텐츠 중에 이미지를 별도로 로드하는 것입니다. 🎜>



코드 복사


코드는 다음과 같습니다.