您好,欢迎访问一九零五行业门户网

纯javascript实现图片延时加载方法_javascript技巧

最近开始整理一些以前写的好用的插件,…^-^!!!
随着页面信息越来越丰富饱满,尤其像淘宝,京东之类的购物网站,首页就是他们的生命线,- -||||
最近在做某银行的网站,只有挤上首页才能得到更多的关注,于是乎各种业务人员就开始了首页位置之争,为了平息他们的战乱。体现我大度包容的一面 ,啊哈哈哈
首页囊括了他们全部的需求,他们满意的走人了,结果技术经理来了,说首页加载怎么这么大,于是乎,减!!!
首当其冲,缩小图片k数,不够,那怎么办,好吧,进入正题。长页面未显示的部分可以先不加载,省流量就是省钱,开搞!!!
思路就是,判断图片在页面中的位置,如果图片的位置大于小于当前的屏幕高度,那么显示图片,否则隐藏图片。
怎么一开始隐藏图片呢,很简单,,给一个浏览器不认识的属性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]);}}}for ( var i = 0, len = element_obj.length; i 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;}function init(tags) {initvar(tags);initelementmap();initdownloadlisten();$(window).scroll(function(){initdownloadlisten();});};init();}
不足之处,页面结构必须已定好,图片的高度必须设置好,不然,无法计算图片距离顶部的高度。需注意。
我们再来看下另外一个小伙伴是如何实现的