An implementation of the picture on the page delay loading JS

If you use Firebug to see, you will find that when you scroll to the corresponding row, the current line of the picture is loaded immediately, this way the page opens only the visible area of the picture, while the other hidden pictures do not load, a certain program to speed up the page loading, for the longer page, This plan is better.

Implementation Principle

Change all images that require delay loading to the following format:

Then, when the page is loaded, all the images that use lazy_src are saved to the array, then the top of the viewable area is calculated when scrolling, and the value of the src of the image in the delayed loaded image is less than the current viewable area (that is, the picture appears in the viewable area) with Lazy_ SRC to replace (load picture)

Code

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;
function Initvar (tags) {
Doc_body = document.body;
Doc_element = Document.compatmode = = ' Backcompat '? Doc_body:document.documentElement;
Lazy_load_tag = Tags | | ["IMG", "iframe"];
};
function Initelementmap () {
var all_element = [];
Find elements that require delay loading from all relevant elements
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]) = = "Object" && 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);//Get the picture relative to the document distance
if (Map_element[t_index]) {
Map_element[t_index].push (i);
} else {
Save a queue by the distance
var t_array = [];
T_array[0] = i;
Map_element[t_index] = T_array;
download_count++;//the number of images that require delay loading
}
}

};
function Initdownloadlisten () {
if (!download_count) return;
var offset = (window. Messageevent &&!document.getboxobjectfor)? Doc_body.scrollTop:doc_element.scrollTop;
Offtset=document High + of visual area
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 < 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;
}
return offsetTop;
}
function init (tags) {
Initvar (tags);
Initelementmap ();
Initdownloadlisten ();
};
return {
Init:init
}
})();

Use method: The page needs to delay loading the image src changed to lazy_src, and then put the above JS to the body of the final surface, and then call:Lazyload.init ();

The way to flirt is to use Firebug to see if a picture is delayed loading.

Other than that:

If there is a content switch on your page, the image may not be displayed in the toggle content, and the process is handled by a separate picture when the content is loaded, such as:

Toggle the content of the code ...
Chlid.find ("img[init_src]"). each (function () {
$ (this). attr ("src", $ (this). attr ("init_src"));
$ (this). Removeattr ("Init_src");