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经测试这个问题已经解决了。

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

 

 

 

 

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

 

 

 

 

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


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

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


你可能感兴趣的:(jquery,chrome,android,工具,测试)