最近开始整理一些以前写的好用的插件，…^-^!!!
随着页面信息越来越丰富饱满，尤其像淘宝，京东之类的购物网站，首页就是他们的生命线，- -||||
最近在做某银行的网站，只有挤上首页才能得到更多的关注，于是乎各种业务人员就开始了首页位置之争，为了平息他们的战乱。体现我大度包容的一面 ，啊哈哈哈
首页囊括了他们全部的需求，他们满意的走人了，结果技术经理来了，说首页加载怎么这么大，于是乎，减！！！
首当其冲，缩小图片K数，不够，那怎么办，好吧，进入正题。长页面未显示的部分可以先不加载，省流量就是省钱，开搞！！！
思路就是，判断图片在页面中的位置，如果图片的位置大于小于当前的屏幕高度，那么显示图片，否则隐藏图片。
怎么一开始隐藏图片呢，很简单，<img csii_src="1.png">,给一个浏览器不认识的属性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 < 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++; } } } ; 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; } function init(tags) { initVar(tags); initElementMap(); initDownloadListen(); $(window).scroll(function(){ initDownloadListen(); }); } ; init(); }
不足之处，页面结构必须已定好，图片的高度必须设置好，不然，无法计算图片距离顶部的高度。需注意。
我们再来看下另外一个小伙伴是如何实现的
<!-- var temp = -1;//用来判断是否是向下滚动（向上滚动就不需要判断延迟加载图片了） window.onscroll = function() { var imgElements = document.getElementsByTagName("img"); var lazyImgArr = new Array(); var j = 0; for(var i=0; i<imgElements.length; i++) { if(imgElements[i].className == "lazy"){ lazyImgArr[j++] = imgElements[i]; } } var scrollHeight = document.body.scrollTop;//滚动的高度 var bodyHeight = document.body.offsetHeight;//body（页面）可见区域的总高度 if(temp < scrollHeight) {//为true表示是向下滚动，否则是向上滚动，不需要执行动作。 for(var k=0; k<lazyImgArr.length; k++) { var imgTop = lazyImgArr[k].offsetTop;//1305（图片纵坐标） if((imgTop - scrollHeight) <= bodyHeight) { lazyImgArr[k].src = lazyImgArr[k].alt; lazyImgArr[k].className = "notlazy" } } temp = scrollHeight; } }; // -->
思路如下：先在<img>标签中将src的值设置为一个极小的图片文件路径，alt属性的值设置为真正要显示的图片文件路径，当向下滚动到图片的位置时，将src的值替换为alt的值，这样就会自动加载真正要显示的图片了，同时，给标签设置一个值为lazy的class，加载完了之后，将其值设置为notlazy，以此来判断哪些图片需要加载，哪些不需要。
代码中的注释已经很清楚了，各位自己慢慢看吧。欢迎扔砖，更欢迎各种改进和完善的建议。
您可能感兴趣的文章: