Js Code for webpage image loading with 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)

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 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 image src to lazy_src that requires 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 "); });