图片懒加载

图片懒加载就是当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度。如果一个首页的图片很多的话，用图片懒加载会让其打开时间大大缩短，提高用户体验。

说白了，其实很简单，就是通过js动态给每个块添加个带有背景图片的类。

html代码片段：

<div id="j_lazy_part">
	<div id="no2" class=""></div>
	<div id="no3" class=""></div>
	<div id="no4" class=""></div>
	<div id="no5" class=""></div>
	<div id="no6" class=""></div>
	<div id="no7" class=""></div>
	<div id="no8" class=""></div>
	<div id="no9" class=""></div>
	<div id="no10" class=""></div>
	<div id="no11" class=""></div>
	<div id="no12" class=""></div>
</div>

css代码片段：

使用background可以在后设置定位center 0，来实现图片居中且不压缩；而给每个块设置height可以是浏览器为每个块预留高度来提高速度。

#no2{ height: 679px; width: 100%; background-color: AEAEA;}
.j-lazy-2{ background:  url("/fenxiao/image/index/newversion/no2.png") no-repeat center 0;}
#no3{ height: 986px; width: 100%; background-color: #fff;}
.j-lazy-3{ background: url("/fenxiao/image/index/newversion/no3.png") no-repeat center 0;}
#no4{ height: 1009px; width: 100%; background-color: #DFDFDF;}
.j-lazy-4{ background: url("/fenxiao/image/index/newversion/no4.png") no-repeat center 0;}
#no5{ height: 1010px; width: 100%; background-color: #fff;}
.j-lazy-5{ background: url("/fenxiao/image/index/newversion/no5.png") no-repeat center 0;}
#no6{ height: 1054px; width: 100%; background-color: #EAEAEA;}
.j-lazy-6{ background: url("/fenxiao/image/index/newversion/no6.png") no-repeat center 0;}
#no7{ height: 898px; width: 100%; background-color: #392E26;}
.j-lazy-7{ background: url("/fenxiao/image/index/newversion/no7.png") no-repeat center 0;}
#no8{ height: 898px; width: 100%; background-color: #EAEAEA;}
.j-lazy-8{ background: url("/fenxiao/image/index/newversion/no8.png") no-repeat center 0;}
#no9{ height: 1068px; width: 100%; background-color: #fff;}
.j-lazy-9{ background: url("/fenxiao/image/index/newversion/no9.png") no-repeat center 0;}
#no10{ height: 976px; width: 100%; background-color: #EAEAEA;}
.j-lazy-10{ background: url("/fenxiao/image/index/newversion/no10.png") no-repeat center 0;}
#no11{ height: 962px; width: 100%; background-color: #fff;}
.j-lazy-11{ background: url("/fenxiao/image/index/newversion/no11.png") no-repeat center 0;}
#no12{ height: 976px; width: 100%; background-color: #D4DBDE;}
.j-lazy-12{ background: url("/fenxiao/image/index/newversion/no12.png") no-repeat center 0;}

js代码片段：

//图片懒加载
function setImg(index){
	var odiv = $("#j_lazy_part").children("div");
	odiv[index].className= "j-lazy-"+(index+2);
}
//获得对象距离页面顶端的距离的
function getH(obj){
	var h = 0;
	while(obj){
		h += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return h;
}
//当网页的滚动条滚动时要时时判断
window.onscroll = function(){
	var odiv = $("#j_lazy_part").children("div");
	for (var i = 0, l = odiv.length; i < l; i++) {
		var osee = odiv[i];  
	    //检查osee是否在可视区域  
	    var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);//这个t是计算浏览器可视高度加上下拉的距离
	    var h = getH(osee);  
	    if (h < t) {  //这个h是固定的，当小于t时就意味着这个obj在可视区域里
	        setTimeout("setImg(" + i + ")", 100);  
	    } 
	}
};

补充：

后来测试的时候突然发现个问题，当打开页面不动滚动条的时候，页面无法显示，一查才知道原来onscroll 事件在元素滚动条在滚动时才触发，当你第一次打开页面或者刷新的时候，滚动条根本没动，所以没有执行。解决方法也很简单：加入ready预加载事件，在打开页面时就执行一次。

var lazy_load_img = function(){
	var odiv = $("#j_lazy_part").children("div");
	for (var i = 0, l = odiv.length; i < l; i++) {
		var osee = odiv[i];  
	    //检查osee是否在可视区域  
	    var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);  
	    var h = getH(osee);  
	    if (h < t) {  
	        setTimeout("setImg(" + i + ")", 100);
	    } 
	}
};
$(window).scroll(function(){
	lazy_load_img();
});

补充：

过几天测试又发现个问题，如果在懒加载区域的上方有个可以随浏览器伸缩的元素，例如banner图片，当其缩小时下面的元素就会上移，但是getH获得的高度还是他没伸缩前的高度，也就意味着他不会显示。解决方法是：设置一个setTimeout刷新一下即可。

$(document).ready(function(){
    lazy_load_img();
    setTimeout("lazy_load_img()",200);
});