Dynamically load the webpage images on the current screen (the images are displayed when the webpage is dragged)

If you use firebug to view the image, you will find that when you scroll to the corresponding row, the image of the current row is loaded instantly. In this way, the page will open images in only visible areas, other hidden images are not loaded, which speeds up page loading in a certain program. For a relatively long page, this solution is better.

Implementation Principle
Change all images that require delayed loading to the following format:
Lazy_src= "Image path" border = "0"/>

Then, when loading the pageLazy_srcThe image is saved to the array, and the top of the visible area is calculated during scrolling. Then, the top of the delayed loading image is smaller than the current visible area (that is, the image appears in the visible area) the SRC value of the image is replaced by lazy_src (the image is loaded ).

Code:

// JavaScript document
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 = 'backcomput '? Doc_body: document.doc umentelement;
Lazy_load_tag = tags | ["IMG", "iframe"];
};

Function initelementmap (){
VaR all_element = [];
// Find the elements that require delayed loading from all related 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); // obtain the distance from the image to the document
If (map_element [t_index]) {
Map_element [t_index]. Push (I );
}
Else {
// Save a queue from the upper distance
VaR t_array = [];
T_array [0] = I;
Map_element [t_index] = t_array;
Download_count ++; // The number of images to be loaded at a time delay
}
}
};

Function initdownloadlisten (){
If (! Download_count) return;
VaR offset = (window. messageevent &&! Document. getboxobjectfor )? Doc_body.scrolltop: doc_element.scrolltop;
// The visual area offtset = Document height +
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 image to lazy_src for delayed loading on the page, put the above js to the end of the body, and then call: lazyload. INIT ();

For the debugging method, you can use firebug to check whether the image is delayed loading.

Note:

If a topic for Content Switching exists on your page, the images in the switched content may not be displayed during the switching. The processing method is to load and process the image separately when the content is being switched, for example:

/// Code for switching content

Chlid. Find ("IMG [init_src]"). Each (function (){
$ (This). ATTR ("src", $ (this). ATTR ("init_src "));
$ (This). removeattr ("init_src ");
});