Principle and code of JavaScript For webpage image loading with latency

Sometimes we see some large websites. If there are many images on the page, When you scroll to the corresponding row, the current row of images will be loaded instantly, in this way, only images in the visible area are displayed on the page, while other hidden images are not loaded, which speeds up page loading in certain programs. For long pages, this solution is better.

Recommended:Use the jquery image delay loading plug-in jquery. lazyload to implement image Delay

Implementation Principle:

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

Then, when loading the page, save all images that use lazy_src to the array, and calculate the top of the visible area during scrolling, then, use lazy_src to replace the SRC value of the top image smaller than the current visible area (that is, the image appears in the visible area) in the delayed loading image (loading the image ):

JS 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 = 'backcomput '? Doc_body: document.doc umentelement; lazy_load_tag = tags | ["IMG", "iframe"] ;}; function initelementmap () {var all_element = []; // find the element for delayed loading from all related elements (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_ob J. 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 var t_array = []; t_array [0] = I; map_element [t_index] = t_array; download_count ++; // number of images to be loaded in a delayed manner }}; function initdownloadlisten () {If (! Download_count) return; var offset = (window. messageevent &&! Document. getboxobjectfor )? Export: doc_element.scrolltop; // The offtset of the visualization area = the height of the document + var visio_offset = offset + offset; 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 
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 ();
You can use firebug to check whether an image is loaded at a delay.
In addition:
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");  });