A piece of js code that implements delayed loading of images on the page_image special effects

Related address:
http://list.taobao.com/browse/30-50029375/n-1----------------------0-- -------yes-------g,ge3denzxhazdumzsgy3tsnzq-----------------------42-grid-commend-0-all -50029375.htm?TBG=14153.14.7&ssid=r18-s18

http://shop.qq.com/shopList.html
If you use firebug to check it, you will find that when you scroll When the corresponding row is reached, the picture of the current row is loaded immediately. In this way, only the pictures in the visible area are added when the page is opened, while other hidden pictures are not loaded. This will certainly speed up the page loading speed. For comparison For long pages, this solution is better.
Implementation Principle

Change all images that need to be delayed loaded into the following format:



Then when the page loads, save all the images using lazy_src into an array, then calculate the top of the visible area when scrolling, and then put the top of the delayed-loaded images smaller than Replace the src value of the picture in the current visible area (that is, the picture appears in the visible area) with lazy_src (load the picture)

Code

Copy code The code is as follows:

lazyLoad=(function() {
var map_element = {};
var element_obj = [];
var download_count = 0;
var last_offset = -1;
var doc_body;
var doc_element;
var lazy_load_tag; body;
doc_element = document.compatMode == 'BackCompat' ? doc_body: document.documentElement;
lazy_load_tag ​​= tags || ["img", "iframe"];
};
function initElementMap () {
var all_element = [];
//Find out the elements that need to be delayed loaded from all related elements
for (var i = 0,
len = lazy_load_tag.length; i var el = document.getElementsByTagName(lazy_load_tag[i]);
for (var j = 0,
len2 = el.length; j if (typeof(el[j]) == "object" && el[j].getAttribute("lazy_src")) {
element_obj.push(all_element[key]);
}
}
}

for (var i = 0,
len = element_obj.length; i var o_img = element_obj[i];
var t_index = getAbsoluteTop(o_img);//Get the top distance of the image relative to the document
if (map_element[t_index]) {
map_element[t_index].push(i);
} else {
//Save a queue according to the distance above
var t_array = [];
t_array[0] = i;
map_element[t_index] = t_array;
download_count;//Requires delayed loading Number of pictures
}
}

};
function initDownloadListen() {
if (!download_count) return;
var offset = (window.MessageEvent && !document .getBoxObjectFor) ? doc_body.scrollTop: doc_element.scrollTop;
//The offset of the visual area = the height of the document
var visio_offset = offset doc_element.clientHeight;
if (last_offset == visio_offset) {
setTimeout(initDownloadListen, 200);
return;
}
last_offset = visio_offset;
var visio_height = doc_element.clientHeight;
var img_show_height = visio_height offset;
for (var key in map_element) {
if (img_show_height > key) {
var t_o = map_element[key];
var img_vl = t_o.length;
for (var l = 0; 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;
}
return offsetTop;
}
function init(tags) {
initVar(tags);
initElementMap();
initDownloadListen();
};
return {
init: init
}
})();


Usage: Change the src of the image that needs to be delayed loaded on the page to lazy_src, and then put the above js into the body At the end, call: lazyLoad.init();

To tease, you can use firebug to check whether the image is delayed loading.
In addition:
If there is a column with content switching on your page, the images in the content may not be displayed during the switching. The solution is to load the images separately during the content, such as:

Copy code The code is as follows:

///Code to switch content...

chlid.find("img[init_src]").each(function(){
$(this).attr("src",$(this).attr("init_src"));
$ (this).removeAttr("init_src");
});