JS Example: page on the picture delay loaded JS code

The effect can look directly at the classification of Taobao products page, as well as QQ Mall page

Related address:

Taobao Mall shows

If you use Firebug to view it, you will find that when you scroll to the corresponding row, the current line of the picture is loaded immediately, such as the page in the open only add visual area of the picture, while other hidden pictures are not loaded, a certain program to speed up the speed of the page loading, for the longer page, This is a better plan.

Implementation Principle

Change all of the pictures that need to be loaded for a delay into the following format:

Then, when the page loads, all the pictures that use lazy_src are saved to the array, then the top of the viewable area is computed when scrolling, and the value of the src of the picture in the delay-loaded picture is less than the current visible region (that is, the picture appears in the viewable area) with the Lazy_ SRC to replace (load the 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 in all related elements that require deferred loading 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 distance from the picture relative to document if (Map_element[t_index]) { Map_element[t_index].push (i); } else { Save a queue by distance var t_array = []; T_array[0] = i; Map_element[t_index] = T_array; download_count++;//the number of pictures that require delay loading } } }; function Initdownloadlisten () { if (!download_count) return; var offset = (window. Messageevent &&!document.getboxobjectfor)? Doc_body.scrollTop:doc_element.scrollTop; The offtset=document of the visual region is high + 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 } })();

Usage: The page needs to be loaded on the picture src change to become lazy_src, and then put the above JS to the body of the last side, and then call: Lazyload.init ();

The Flirt method can use Firebug to see if the picture is delayed loading.

Other than that:

If you have content on the page of the column, you may switch the contents of the picture may not be displayed, the processing method is in the content of the individual image loading processing, such as:

Switch code for content ... Chlid.find ("img[init_src]"). each (function () { $ (this). attr ("src", $ (this). attr ("init_src")); $ (this). Removeattr ("Init_src"); });