Shulou(Shulou.com)06/03 Report--

This article mainly introduces how the delayed loading of pictures on the home page of the website in web is realized. It is very detailed and has a certain reference value. Interested friends must finish reading it!

With more and more information on the page, especially shopping sites like Taobao and JD.com, the home page is their lifeline!

Recently, in the website of a bank, only by squeezing on the front page can we get more attention, so all kinds of business personnel began to fight for the location of the home page in order to quell their war. The home page included all their needs, and they left satisfactorily. As a result, the technical manager came and said that the home page load was so large, so, minus!

Bear the brunt, reduce the picture K number, not enough, then what to do, all right, get to the point. The undisplayed part of the long page can not be loaded first, save traffic is to save money, start!

The idea is to determine the position of the picture on the page, and if the position of the picture is greater than the current screen height, then show the picture, otherwise hide the picture.

How to hide the picture in the first place? it's simple.

, give an attribute csii_src that the browser does not know, and use element.src=element.getAttribute ("csii_src") when you need to display the picture; the idea is very simple, code it.

Function lazyLoad () {var map_element = {}; var element_obj = []; var download_count = 0; var last_offset =-1; var doc_body = null; var doc_element = null; 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 () {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("csii_src")) { element_obj.push(el[j]); }//欢迎加入全栈开发交流圈一起学习交流：1007317281 } } for (var i = 0, len = element_obj.length; i < len; i++) { var o_img = element_obj[i]; var t_index = getAbsoluteTop(o_img); if (map_element[t_index]) { map_element[t_index].push(i); } else { var t_array = []; t_array[0] = i; map_element[t_index] = t_array; download_count++; }//欢迎加入全栈开发交流圈一起学习交流：1007317281 } }; function initDownloadListen() { if (!download_count) return; /*var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop;*/ var offset; if (os.firefox) { offset = doc_element.scrollTop; } else { offset = doc_body.scrollTop; } 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 + 20; for (var key in map_element) { if (img_show_height >

Key) {var tweeo = map_ element.for (var l = 0; l < img_vl; lump +) {element_ obj [t _ o]] .src = element_ obj [t _ o [l]] .getAttribute ("csii_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;} / / Welcome to join the full stack development communication circle: 1007317281 function init (tags) {initVar (tags); initElementMap (); initDownloadListen (); $(window) .conversation (function () {initDownloadListen ();});} Init ();} above are all the contents of this article entitled "how to achieve delayed loading of pictures on the home page of a website in web". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.