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

 转载:http://www.163css.com/hihilinxuan/log/634454000574340000.html 

  不知你在浏览淘宝商城(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