lazyload.js实现淘宝商城图片加载效果

作者:林炜贤来源:www.163css.com发表时间:(2011-07-04)

不知你在浏览淘宝商城(tmall.com)的时候有没有见注意到这样一种现象:打开淘宝商城的时候图片是一张张加载的,也就是说你的鼠标移动到相应的地方,图片就load出来。从用户体验的角度来说,这样的显示效果是挺不错的,不会觉得很突然。

至于这样对服务器好不好,我也确定不了,上网查了下资料了,结果发现原来页面加载时,所有图片都加载了,只是没有显示罢了,当拉动滚动条的时候,又向服务器发送请求,这加重了服务器的负担。。。

当然了,淘宝商城这样做,肯定有它的道理,所以我们还是跟着使用吧,不过,淘宝的JS代码是集成的,我没办法拿到手,只能使用lazyload.js来实现了,不过,还得需要另外一个脚本,才能让加载更完美,用户需要就下载使用吧。。。

所说lazyload.js将不需要加载的img的src值暂时存在original中,阻止img标签向服务器发送http请求,当需要加载的时候,再将 original中的保存的src值附回去。会不会很复杂?我们能用就行。。。

在我今天介绍的这个例子中,我采用了趣玩的图片,这得谢谢它,还有它的CSS。。。

以下是我制作的效果截图:

加载得很漂亮哦,非常开心。。。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/201107/layzload/index.html

下载地址:lazyload_js实现淘宝商城图片加载效果.zip

返回作者主页:www.163css.com阅读 (11523)
更多 1