图片延迟加载

 

<script type="text/javascript">
Array.prototype.remove = function(dx)
{
	if (!isNaN(dx) && dx < this.length) 
	{
		// 数组新的长度-1
		var newLength = this.length - 1;
		// 从删除索引部分开始遍历集合(可减少遍历次数)，依次进1
		for ( var i = dx; i < newLength;) {
			this[i] = this[++i]
		}
		// 设置新的长度
		this.length = newLength;
	}
}
{
	// 窗口滚动条滚动时，可视区域发生改变，调用延迟加载图片的方法
	window.onscroll = function() {
		var scrollTop = document.compatMode == "CSS1Compat" ? document.documentElement.scrollTop
				: document.body.scrollTop;
		var clientHeight = document.documentElement.clientHeight;
		// alert(sTop+"--"+cHeight);
		lazyLoadImgesMethod();
	};
	// 窗口大小改变时，可视区域改变，调用延迟加载图片的方法
	window.onresize = function() {
		lazyLoadImgesMethod();
	};

	// 需要延迟加载的图片元素集合
	lazyLoadImgArray = document.getElementsByName("lazy_load_img");
	// 为了便于使用remove方法，创建新的array存储这些image对象
	lazyLoadImgArrayTmp = null;
	if (lazyLoadImgArray != null && lazyLoadImgArray.length > 0) {
		lazyLoadImgArrayTmp = new Array();
		for (i = 0; i < lazyLoadImgArray.length; i++) {
			lazyLoadImgArrayTmp[i] = lazyLoadImgArray[i];
		}
	}

	lazyLoadImgesMethod = function() {
	
		// 兼容各浏览器的clientWidth，clientHeight，scrollWidth，scrollHeight，scrollLeft，scrollTop
		var cWidth, cHeight, sWidth, sHeight, sLeft, sTop;
		if (document.compatMode == "BackCompat") 
		{
			cWidth = document.body.clientWidth;
			cHeight = document.body.clientHeight;
			sWidth = document.body.scrollWidth;
			sHeight = document.body.scrollHeight;
			sLeft = document.body.scrollLeft;
			sTop = document.body.scrollTop;
		} 
		else // document.compatMode == "CSS1Compat"
		{
			cWidth = document.documentElement.clientWidth;
			cHeight = document.documentElement.clientHeight;
			sWidth = document.documentElement.scrollWidth;
			sHeight = document.documentElement.scrollHeight;
			sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft
					: document.documentElement.scrollLeft;
			sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop
					: document.documentElement.scrollTop;
		}
		
		if (lazyLoadImgArrayTmp != null && lazyLoadImgArrayTmp.length > 0) {
			// 遍历所有延迟加载的图片
			for (i = 0; i < lazyLoadImgArrayTmp.length; i++) {
				// 计算该元素与顶部距离
				objTopDistance = getTopDistance(lazyLoadImgArrayTmp[i]);
				// 计算当前可视区域至顶部的距离
				bodyTopDistance = sTop + cHeight;

				// 如果该元素在可视区域范围或可视范围之上，加载当前元素图片(可以调整上下相差的数值，改变加载的位置)
				if (bodyTopDistance > objTopDistance&&objTopDistance+205>sTop) {
					// 设置样式显示
					lazyLoadImgArrayTmp[i].style.visibility = "visible";
					// 加载src_lazy属性下的图片
					lazyLoadImgArrayTmp[i].src = lazyLoadImgArrayTmp[i]
							.getAttribute("src_lazy");
					// 移除该数据，不需要再次加载
					lazyLoadImgArrayTmp.remove(i--);
				}
			}
		} else {
			// 已经全部加载完毕停止事件触发
			window.onscroll = null;
			window.onresize = null;
		}
	};
	/**
	 * 获取对象到顶部的距离数值
	 * 
	 * @param elementObj:页面元素对象
	 * @return 获取参数对象距页面顶部的距离(px)
	 */
	function getTopDistance(elementObj) {
		// 元素相对顶部距离
		topDistance = null;
		if (elementObj) {
			topDistance = 0;
			do {
				// 循环累加元素相对上级元素的距离，直到再无上级，即为总距离
				topDistance += elementObj.offsetTop;
				elementObj = elementObj.offsetParent
			} while (elementObj != null);
		}
		return topDistance;
	}
	/*if (document.body.scrollTop == 0) {
		// 第一次加载，加载当前区域
		lazyLoadImgesMethod();
	}*/
}
</script>