这篇文章主要介绍web中网站首页的图片延迟加载是怎么实现的,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
随着页面信息越来越丰富饱满,尤其像淘宝,京东之类的购物网站,首页就是他们的生命线!
最近在做某银行的网站,只有挤上首页才能得到更多的关注,于是乎各种业务人员就开始了首页位置之争,为了平息他们的战乱。首页囊括了他们全部的需求,他们满意的走人了,结果技术经理来了,说首页加载怎么这么大,于是乎,减!!!
首当其冲,缩小图片K数,不够,那怎么办,好吧,进入正题。长页面未显示的部分可以先不加载,省流量就是省钱,开搞!!!
思路就是,判断图片在页面中的位置,如果图片的位置大于小于当前的屏幕高度,那么显示图片,否则隐藏图片。
怎么一开始隐藏图片呢,很简单,<img csii_src="1.png" alt="图片延迟加载实现原理">,给一个浏览器不认识的属性csii_src,当需要显示图片的时候在element.src=element.getAttribute("csii_src");,思路很简单吧,上代码了。
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 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("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; }//欢迎加入全栈开发交流圈一起学习交流:1007317281 function init(tags) { initVar(tags); initElementMap(); initDownloadListen(); $(window).scroll(function() { initDownloadListen(); }); }; init(); }
以上是“web中网站首页的图片延迟加载是怎么实现的”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。