zoukankan      html  css  js  c++  java
  • 延迟加载

    var imagesrcname='a',thissrolltop=300,
    	lazyLoad=(function(){
    		var map_element    = {},
    			element_obj    = [],
    			download_count = 0,
    			last_offset    = -1,
    			doc_body,
    			doc_element,
    			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(imagesrcname)) { 
    						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 getscrolltop = document.body.scrollTop;
    			if(getscrolltop == 0)
    			{
    				getscrolltop = document.documentElement.scrollTop;
    			}
    			var offset = (window.MessageEvent && !document.getBoxObjectFor) ? getscrolltop: getscrolltop; 
    			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 + thissrolltop; 
    			var img_show_height = visio_height + offset; 
    			//var allurlnum = parseInt(imageurlarray.length);
    			//if(allurlnum <= 0)
    			//{
    			//	allurlnum = 1;
    			//}
    			var j = 0;
    			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++) { 
    						//var u_j = j % allurlnum;
    						//var thisurl = imageurlarray[u_j];
    						//if(element_obj[t_o[l]].getAttribute(imagesrcname).indexOf('http://') != -1) thisurl='';
    						//element_obj[t_o[l]].src = thisurl + element_obj[t_o[l]].getAttribute(imagesrcname); 
    						element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute(imagesrcname);
    						element_obj[t_o[l]].removeAttribute(imagesrcname);
    						j++; 
    					} 
    					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(); 
    		}; 
    		return { 
    			init: init 
    		} 
    })();
    lazyLoad.init();
    
  • 相关阅读:
    java集合
    linux网络配置(iproute2)
    linux网络配置(ifcfg)
    linuxshell编程之数组和字符串处理工具
    linux网络配置文件
    linux 内核版本和发行版本区别
    linux 相关零碎知识整理
    linux计算机网络基础
    linux bash编程之函数和循环控制
    linux bash shell编程之参数变量和流程控制。
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/3907805.html
Copyright © 2011-2022 走看看