js实现网页图片延时加载的原理和代码（JS implementation of the page picture delay loading principle and code）.doc

js实现网页图片延时加载的原理和代码（JS implementation of the page picture delay loading principle and code） JS implementation of the page picture delay loading principle and code Demo, we can see Taobao and bing. If you use firebug to view then you will find that when you scroll to the corresponding row, the current row picture only immediate loading, so you open page in the only visible images, and other hidden pictures is not loaded, certain procedures to speed up the page loading speed, for a long page, this scheme is good. Realization principle Change all the pictures that need to be loaded in time to the following format: img lazy_src= the image path border= 0 / Then when a page loads, all using lazy_src images are saved to the array, then calculate the viewing area of the top in rolling, and then put the pictures in the top delay is less than the current visual area (i.e. image appears in the visible region) picture of the value of SRC with lazy_src to replace (loading 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 = patMode = =BackCompatdoc_body: document.documentElement?; Lazy_load_tag = tags || [img, iframe]; }; Function, initElementMap () { Var all_element = []; Need to find / delay loading elements 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); / / document relative distance distance. If (map_element[t_index]) { Map_element[t_index].push (I); } else { According to the distance from the distance / save a qu