关于图片的懒加载

目前，一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度，具体实现的技术并不复杂，下面分别对其说明。首先，在页面中准备一个id为div1的div,在这个div中放一个ul,ul中准备了一些li,然而这些li都有一个data-src的属性，准备着图片的地址，具体结构如下：

<div id="div1">
	<ul>
		<li data-src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg"></li>
		<li data-src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg"></li>
		<li data-src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg"></li>
		<li data-src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg"></li>
		<li data-src="http://dl.bizhi.sogou.com/images/2014/12/02/986640.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170473_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170475_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170477_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
		<li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
	</ul>
</div>

图片的动态加载就是通过读取li元素，然后获得li元素的data-src属性的值赋予动态创建的图片的src，从而实现了图片的创建。

function setImg(index){
	var oDiv=document.getElementById("div1")
	var oUl=oDiv.children[0];
	var aLi=oUl.children;
	if (aLi[index].dataset) {
		var src=aLi[index].dataset.src;
	} else{
		var src=aLi[index].getAttribute('data-src');
	}
	var oImg=document.createElement('img');
	oImg.src=src;
	if (aLi[index].children.length==0) {
		aLi[index].appendChild(oImg); 
	}
}

那么怎么识别是否在可视区域呢？这里需要一个函数，能够实现获得当前元素距离网页顶部的距离！

//获得对象距离页面顶端的距离  
function getH(obj) {  
	var h = 0;  
	while (obj) {  
		h += obj.offsetTop;  
		obj = obj.offsetParent;  
	}  
	return h;  
}

当网页的滚动条滚动时要时时判断当前li的位置！

	window.onscroll = function () {
	var oDiv = document.getElementById('div1');
	var oUl = oDiv.children[0];
	var aLi = oUl.children;
	for (var i = 0, l = aLi.length; i < l; i++) {
		var oLi = aLi[i];
		//检查oLi是否在可视区域
		var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
		var h = getH(oLi);
		if (h < t) {
			setTimeout("setImg(" + i + ")", 500);
		}
	}
};

当页面加载完成以后要主动运行一下window.onscroll，从而获得当前可视范围内的图片

1
2
3

window.onload = function () {
	window.onscroll();
};

另外，像这样的页面，障眼法和美化都是必须的，比如给每个li一个loading的图片作为背景，从而实现了当前图片正在加载的效果，美化工作就是做好合理的布局。

* {
	margin: 0;
	padding: 0;
}
#div1 {
	width: 520px;
	margin: 30px auto;
	border: 1px solid red;
	overflow: hidden;
}
li {
	width: 160px;
	height: 160px;
	float: left;
	list-style: none;
	margin: 5px;
	background: url(loading.gif) center center no-repeat;
	border: 1px dashed green;
}
img{
	width:100%
}

2016-05-28