图片懒加载功能(优化页面加载速度)
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 代码了...还是不行了。。 |
最近更新
常用插件
- ecshop二次商品订购人信息
ecshop二次商品订购人信息填写插件,有时候给朋友送花,或者是送礼品的...
- ecshop2.7.1打印发货单插件
ecshop2.7.1打印发货单插件介绍:ecshop2.7.1和以前的ecshop版本不一样,ecs...
- ecshop分类批量扩展插件
ecshop分类批量扩展插件,这个插件是ecshop插件里面比较核心的插件。我们...
- ecshop二次开发详细页面生
插件介绍: ECSHOP系统,在很多时候,很多商品没有人购买,不但购买的人...
- ecshop商品分类名称增加样
ecshop插件介绍:本插件可以方便在后台管理,为ecshop商品分类名称增加样...
ecshop热门问答
ecshop热门资料
ecshop网易
ecshop公式
ecshop添加文章
ecshopbuy
ecshop文本文件
ecshop清理
ecshop推广员
ecshopSmallAppliances
ecshop品牌价格分类
ecshop迅雷下载
ecshop css
ecshop登录
ecshop商品缩略图
ecshop1652
ecshop老外看
ecshop储存量
ecshop软件版本
ecshop排列
ecshopECShop教程
ecshop求助啊!
ecshop人人网
ecshoplaobingcs
ecshop时尚
ecshop面的
ecshop购物车详情
ecshop调出
ecshopCMYK
ecshop攻击
ecshop什么什么
ecshop当前导航