最近開始整理一些以前寫的好用的插件，…^-^!!!
隨著頁面信息越來越豐富飽滿，尤其像淘寶，京東之類的購物網站，首頁就是他們的生命線，- -||||
最近在做某銀行的網站，只有擠上首頁才能得到更多的關注，于是乎各種業務人員就開始了首頁位置之爭，為了平息他們的戰亂。體現我大度包容的一面 ，啊哈哈哈
首頁囊括了他們全部的需求，他們滿意的走人了，結果技術經理來了，說首頁加載怎么這么大，于是乎，減?。?！
首當其沖，縮小圖片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，以此來判斷哪些圖片需要加載，哪些不需要。
代碼中的注釋已經很清楚了，各位自己慢慢看吧。歡迎扔磚，更歡迎各種改進和完善的建議。
新聞熱點
疑難解答
