图片懒加载

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

说白了，其实很简单，就是通过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);});