jQuery图片延迟加载技术的应用-js延迟加载

我们使用新浪微博的时候，在“微博精选”页面里可以看到大量的微博信息。该页面信息主要是以图片配文字说明，页面使用了自适应网格布局即砌墙效果，图片加载技术，以及滚动加载内容技术。本文先介绍砌墙效果。

其实我们做页面布局就相当于砌墙师傅在完成一堵墙的施工。我们在设计页面的时候，假如有很多相同的DIV，装载不同的内容，这些DIV都使用float：left，如果不限制这些DIV的高度，页面布局可能会出现砌墙架空的现象。点击这里查看效果，而经过布局优化后的页面布局效果大不一样，请看DEMO。

本文使用David DeSandro写的一个页面布局插件Masonry，该插件基于jQuery库，提供很多参数和方法，可以根据不同的需求定制不同的效果。

XHMTL

首先是要引入jQuery库和Masonry插件。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.masonry.min.js"></script>

我们仿照新浪微博构建一个html页面，DIV#container放置多个相同的DIV.photo。

<div id="container">   
      <div class="photo">   
         <a href="#"><img src="images/02.jpg" alt="" /></a>   
         <p><a href="#">菓小菓</a>：随时都要卖，还要又又美味</p>   
      </div>   
      .....N个photo...   
</div>

CSS

#container{width:780px; margin:10px auto}   
.photo{float:left; width:205px; margin:10px; padding:10px; border:1px solid #d3d3d3;   
 background:#f7f7f7;-moz-border-radius:4px;-khtml-border-radius: 4px;-webkit-border-radius: 4px;    
 border-radius:4px;}   
.photo img{width:205px}   
.photo p{line-height:20px; margin:4px auto}

jQuery

$(function(){   
  $('#container').masonry({   
    itemSelector : '.photo',   
    columnWidth : 247   
  });   
});

调用masonry插件，配置参数itemSelector对应的是class为photo的div，columnWidth为247，columnWidth的值是由.photo的宽度+padding*2+margin*2+border*2得到的。

上面只介绍砌墙布局，接下来结合本文把图片加载技术和滚屏加载技术进行介绍。

我们在浏览图片量非常大的页面时，像淘宝商城商品展示、必应图片搜索这类网站，图片的加载非常流畅，其中就应用了图片延迟加载技术。本文讲解Lazyload图片加载插件，当我们打开页面时，首先在屏幕可视区域加载完图片，随着向下滚动页面，图片会陆续加载，从而提升了页面打开速度。

Lazyload是一款基于jQuery的插件，在要显示大量图片的页面，图片是按需加载的，只在浏览器可视区内加载图片，当用户使用滚动条下拉时，后面的图片才会继续加载，从某种意义上讲，这种技术减少了服务器的负载。您可以到Lazyload官网下载***的版本：http://www.appelsiini.net/projects/lazyload。

在body中需要放置图片的区域放置多个要显示的图片。图片越多效果越明显。

注意，每张图片的src属性对应的是一张预定义的图片，就是再真正的图片还没加载的时候的替代图片，我们通常使用1x1的blank.gif图片。真正的图片是由属性data-original指定的，然后还需要设置图片的宽度和高度。

和许多插件使用一样，只需要在元素上调用lazyload()即可，现在你就可以看到效果了。Lazyload同样提供了多个参数可设置不同的效果。

threshold：灵敏度，即可以通过设置灵敏度来控制图片的加载，如设置为200，即200像素前加载图片，默认为0，即到达图片边界时才加载。

event：绑定事件，即可以通过绑定click、mouseover或者任意自定义事件来触发图片的加载。默认是当用户滚动到图片窗口时触发图片加载。

effect：设置效果，即可以设置图片加载时的特效，如fadeIn，默认是show。

您还可以设置一个容器里的图片横向或纵向滚动加载效果，不过这个用的少，详情请查看lazyload官网：http://www.appelsiini.net/projects/lazyload