图片懒加载功能（优化页面加载速度）

2016-07-07 14:55 来源：www.chinab4c.com 作者：ecshop专家



很多的商城都使用了图片懒加载功能，打开页面的时候图片如果不在窗口区域则不加载，用户滑动页面再加载，实现滚动加载效果。
页面加载速度比较：
未使用懒加载：（商品列表页面，商品缩略图为18张，加上其他的图片总加载时间为4s）

采用懒加载：（加载时间为2s）


对于列表页面图片多的情况下效果还是很明显的，其它区域也可以使用懒加载，视个人需要而定。

实现方法：
1、前提：你的ecshop程序解决了jquery冲突的问题。
2、引入插件：jquery.scrollLoading.js
3、将需要懒加载的区域图片修改为：
<img src="/themes/default/images/loading_230.gif" data-url="{$goods.goods_thumb}" alt="{$goods.goods_name}" class="scrollLoading" />
说明：src:填一个loading效果的图片，data-url:图片的真实地址，class属性为:scrollLoading
4、调用插件：<script>$(".scrollLoading").scrollLoading();</script>

附件里面有：jquery.scrollLoading.js和loading图片.


回答：
不错不错，支持分享！

ECSHOP学习资料：http://www.phpally.com

学习学习，登下载

下载了，学习一下，看看和我之前用的有什么不同

感谢共享，

thank you!

不错支持下http://www.huonifou.com

这个必须顶 太棒了

顶起来............

收藏，不错的

已用上~~~~~

不能用了，怎么用啊， head 文件插入了js 和script 代码了...还是不行了。。