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

관련 주소:
http://list.taobao.com/browse/30-50029375/n-1---------0-- -------예---------g,ge3denzxhazdumzsgy3tsnzq------------42-grid-commend-0-all -50029375.htm?TBG=14153.14.7&ssid=r18-s18

http://shop.qq.com/shopList.html
firebug를 이용하여 확인해 보면 알 수 있습니다. 스크롤 해당 행에 도달하면 현재 행의 그림이 즉시 로드됩니다. 이렇게 하면 페이지를 열 때 보이는 영역의 그림만 추가되고 다른 숨겨진 그림은 로드되지 않습니다. 페이지 로딩 속도 비교를 위해 긴 페이지의 경우 이 솔루션이 더 좋습니다.
구현 원칙

로드를 지연해야 하는 모든 이미지를 다음 형식으로 변경합니다.



그런 다음 페이지가 로드되면lazy_src를 사용하여 모든 이미지를 배열로 저장한 다음 스크롤할 때 표시되는 영역의 상단을 계산하고 지연 로드된 이미지의 상단을 다음보다 작게 배치합니다. 현재 보이는 영역(즉, 보이는 영역에 그림이 나타나는 것)에 있는 그림의 src 값을lazy_src(그림 로드)로 대체

Code

코드 복사 코드는 다음과 같습니다.

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를 사용하여 이미지 로딩이 지연되는지 확인할 수 있습니다.
추가:
페이지에 콘텐츠 전환이 있는 열이 있는 경우 전환 중에 콘텐츠의 이미지가 표시되지 않을 수 있습니다. 해결 방법은 다음과 같이 콘텐츠 중에 이미지를 별도로 로드하는 것입니다. 🎜>



코드 복사


코드는 다음과 같습니다.

///콘텐츠 전환 코드...
chlid.find("img[init_src]").each(function(){
$(this).attr("src",$(this).attr("init_src"));
$ (this).removeAttr("init_src")

});