JQuery.LazyLoad 实现图片懒加载

最近在android项目中需要结合webview显示刊物，一份期刊有3M左右的图片，为了节约用户流量于是学习了一下图片懒加载技术。

国内关于这个话题的文章不少，但是看了也试了就是没达到效果，搞得我很蛋疼。后面还是直接到官网去看，写的简单明了（http://www.appelsiini.net/projects/lazyload）,另外官网还提供了一个例子：http://www.appelsiini.net/projects/lazyload/enabled.html。使用的是jquery1.7，lazyload 3。

网上有人反映说lazyload只是效果好看并没有实现真正的懒加载，在后台仍然是把页面上的所有图片下了一遍，只不过是先把图片隐藏并在窗口向下滚动时再逐一显示出来罢了。lazyloag3经测试这个问题已经解决了。

还有一点必须注意的是，如果想达到在窗口向下滚动时图片一张张下载的效果，最好给图片设置足够的高度。如下面的代码

<img data-original="images/bg00001.jpg" src="/js/grey.gif" border="0" /> 

<img data-original="images/bg00002.jpg" src="/js/grey.gif" border="0" /> 

<img data-original="images/bg00003.jpg" src="/js/grey.gif" border="0" /> 

<img data-original="images/bg00004.jpg" src="/js/grey.gif" border="0" /> 

默认显示grey.gif，grey.gif高度只有1px，当页面打开时bg00001.jpg，bg00002.jpg，bg00003.jpg，bg00004.jpg这四张图片会被全部下载下来。如果我们设置了高度，代码如下

<img data-original="images/bg00001.jpg" height="600" src="/js/grey.gif" border="0" /> 

<img data-original="images/bg00002.jpg" height="600"  src="/js/grey.gif" border="0" /> 

<img data-original="images/bg00003.jpg" height="600"  src="/js/grey.gif" border="0" /> 

<img data-original="images/bg00004.jpg" height="600"  src="/js/grey.gif" border="0" /> 

那么一次只会下载一张或者两张（多少张依据窗口高度，图片高度而定）

这里就不贴代码代码，提供包下载，有兴趣的童鞋可以下。用Chrome的开发人工具->NetWork可以查看效果。

下载地址：http://download.csdn.net/detail/goleftgoright/4028546