【分享】ecshop加快载入速度，也是非常实用炫丽的优化技巧-lazyload进阶

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



http://www.qi9.cn/html/780_4055.html(ecshop和jquery不兼容解决方法)

——老杨，承接一切ecshop二次开发、整站建设，QQ:359199843

注：由于浏览器升级，现在的lazyload已几乎全部失去真实缓载效果。必需结合前台进行开发，不然不建议使用此功能，因为有可能会加重服务器负担！有需要的，请联系老杨定制开发此功能！！
提示：真实缓载需要到对应的引用图片的文件，将src=换成一张空白图，如src="grey.gif"然后再加上lazyload的脚本data-original="图片真实位置"


好了，老杨不多废话，直接进入主题 ：Lazyload想必大家对这个功能并不陌生吧，类似像淘宝商城这样的网站效果，有些网站页面图片数量巨大，firefox、chrome浏览器还好，如果碰到ie6\360这样的，因为图片和样式、框架是一起加载的，打开速度那不是一般慢。

lazyload的作用正是图片缓载，当用户打开一个页面时，只先加载当前窗口区域内需要加载的图片，当滚动窗口时，出现的图片可以以渐出、动画（类似一个圆在转动的loadding图）的形式加载图片，以达到节省资源，加快浏览速度的目的。
老杨发现，当前的一些lazyload脚本普遍分成两种，一种是光有好看的效果，没有实既优化作用的js脚本。这一种老杨以前碰过，最早我到网上下了一种，后来用firebug查看加载时间表时，发现其实整站图片已经加载完了，但是没有显示。这只是一种使图片渐出的效果脚，反而会加重网页的负担。
第二种遍是我们需要了，即有效果又能缓载。
讲这些主要是让朋友下载源码时留个心眼，不要下错了。

现在我主要谈谈lazyload一些额外技巧：
lazyload有些不完美的地方，老杨以前碰过许多。比如：
含有js动态轮播图的，有的js动态轮播脚本是把图片一一排下，固定容器，变化高度或左右来移动图片。所以，自然的就使得后面隐藏的图片实际上已远远超出了浏览器窗口。所以这时就算图片轮播到了后面的，显示也是空白。
这个因素是有的，归纳一下的话，就是有的图片需要lazyload效果，有的图片则不需要。
实现方法：

$("img").lazyload(
{
placeholder: "themes/default/images/grey.gif",
effect: showeffect,
failurelimit : 10,
……
})


这是脚本中的一段，主要是可选参数设置。

$("img").lazyload(
这一段代表lazyload加载所有<img />标签的图片，也就是对所有图片都生效。

现在我们可以改成这样：
$("#LazyBOX img").lazyload(
代表的就是lazyload只对id="LazyBOX "容器内的图片生效。

id是唯一的，所以，如果针对多个容器，可以改成：
$(".LazyBOX img").lazyload(
这样，凡是class="LazyBOX "的容器都会有效。

这是lazyload一个很实用也很重要的一个技巧。

再发一段我直接从网上复制的参数介绍：


lazyload插件如何添加参数：
$("img").lazyload({//参数添加到此位置，建议一行一个,用英文,作间隔});

1,用图片提前占位
placeholder : "img/grey.gif",

参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
2,载入使用何种效果
effect : "fadeIn",

参数：effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn

3,提前开始加载
threshold : 200,

参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

4,事件触发时才加载
event : "click",

参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…

5,对某容器中的图片实现效果
container: $("#container"),

参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片

6,图片排序混乱时
failurelimit : 10,

参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.（这个功能我没试过）



Lazyload使用方法：
jquery，这是必须的。 附件中有，你也可以开网上下载
jquery.lazyload.js附件中有，你也可以开网上下载

ecshop有的模板会不兼容jquery，所以务必到网上搜一下解决办法，这个我就不多讲了，现在大多模板都修改过了。

头部添加：
<script type="text/javascript" src="**你的位置**/js/jquery.js"></script>

引用jquery后的地方添加：
<script type="text/javascript" src="**你的位置**/js/jquery.lazyload.js"></script>

——老杨，承接一切ecshop二次开发、整站建设，QQ:359199843


ecshop整站类开发：

【整站开发】老杨 一个整站开发 大家看看有没有喜欢的功能

【整站开发】 ecshop 功能站，含短信发送优惠卷功能等

【整站开发】老杨 一个整站开发2 大家看看有没有中意的功能

ecshop团购类开发：

ecshop 最新仿京东团购，含往期团购、最新团购、团购详情页相册等

ECSHOP仿走秀团购全功能

ECSHOP仿唯品会闪购全功能

ecshop功能类开发：

ecshop 支付宝、财付通、快钱‘银行直连’、'快捷支付'功能【分两种不同选择方式】

ecshop 可选套餐功能【全选送赠品功能+非全选并两个以上有折扣】很强大

ecshop仿京东 装机大师 最完善版（保存发布配置、后台管理等一系列完善功能）

ecshop 最完美全站多城市切换 后台管理 可扩展性强-【新增各个城市单独管理员，配合‘独立供货商’系统】

ecshop 商家管理 独立后台 商家只能单独管理自己的订单

ecshop 注册项强大功能开发（含不同注册类型、注册后台审核）

ECSHOP仿麦包包留言板全功能，带留言查询（输入email\qq\手机查询）

ECSHOP合作登录功能等大量插件

开发功能、开发技巧分享：

【共享】ecshop 仿淘宝加入购物车弹出框，非jquery，淡出淡隐效果，固定屏幕，兼容ie

【分享】ECSHOP QQ、新浪、支付宝、人人等合作登录功能插件 含后台设置功能（可选）

【分享】需要商品分类树显示商品总数的方法

【共享】商品详情页添加购买数量加减按钮[ 增加购物车页面数量加减按钮 添加的代码]

【分享】发现很多新手不知道拿了模板怎么用，老杨在这粗略的解答一下

【分享】ecshop加快载入速度，也是非常实用和炫丽的ecshop优化技巧-lazyload实用进阶

【分享】ecshop 添加本地视频播放（支持大部份视频格式）-视频播放插件


——老杨，承接一切ecshop二次开发、整站建设，QQ:359199843

回答：


帮忙支持下

来个演示看看嘛

看看效果，来个演示看看

看看演示站就更完美了

ecshop本身和jquery不兼容，新手不建议使用。需要改动的地方太多

东西蛮多的。

支持下这个需要的

支持下这个需要的

又被和谐　了？？　　看不到内容了。

很想看看怎么搞得呢。。我感觉这个东西应该很实用。在新浪app里面看过。



因为上次ec维护（zf要求涉及敏感词的全部要屏蔽）的原因，该帖不幸被屏蔽。
真是躺着也中枪啊。老杨几篇原创都河蟹掉了！
只能重新发了。
只可惜之前没占到二楼，以后老杨要学聪明了。

http://www.qi9.cn/html/780_4055.html(ecshop和jquery不兼容解决方法)

——老杨，承接一切ecshop二次开发、整站建设，QQ:359199843
好了，老杨不多废话，直接进入主题 ：Lazyload想必大家对这个功能并不陌生吧，类似像淘宝商城这样的网站效果，有些网站页面图片数量巨大，firefox、chrome浏览器还好，如果碰到ie6\360这样的，因为图片和样式、框架是一起加载的，打开速度那不是一般慢。

lazyload的作用正是图片缓载，当用户打开一个页面时，只先加载当前窗口区域内需要加载的图片，当滚动窗口时，出现的图片可以以渐出、动画（类似一个圆在转动的loadding图）的形式加载图片，以达到节省资源，加快浏览速度的目的。
老杨发现，当前的一些lazyload脚本普遍分成两种，一种是光有好看的效果，没有实既优化作用的js脚本。这一种老杨以前碰过，最早我到网上下了一种，后来用firebug查看加载时间表时，发现其实整站图片已经加载完了，但是没有显示。这只是一种使图片渐出的效果脚，反而会加重网页的负担。
第二种遍是我们需要了，即有效果又能缓载。
讲这些主要是让朋友下载源码时留个心眼，不要下错了。

现在我主要谈谈lazyload一些额外技巧：
lazyload有些不完美的地方，老杨以前碰过许多。比如：
含有js动态轮播图的，有的js动态轮播脚本是把图片一一排下，固定容器，变化高度或左右来移动图片。所以，自然的就使得后面隐藏的图片实际上已远远超出了浏览器窗口。所以这时就算图片轮播到了后面的，显示也是空白。
这个因素是有的，归纳一下的话，就是有的图片需要lazyload效果，有的图片则不需要。
实现方法：

$("img").lazyload(
{
placeholder: "themes/default/images/grey.gif",
effect: showeffect,
failurelimit : 10,
……
})


这是脚本中的一段，主要是可选参数设置。

$("img").lazyload(
这一段代表lazyload加载所有<img />标签的图片，也就是对所有图片都生效。

现在我们可以改成这样：
$("#LazyBOX img").lazyload(
代表的就是lazyload只对id="LazyBOX "容器内的图片生效。

id是唯一的，所以，如果针对多个容器，可以改成：
$(".LazyBOX img").lazyload(
这样，凡是class="LazyBOX "的容器都会有效。

这是lazyload一个很实用也很重要的一个技巧。

再发一段我直接从网上复制的参数介绍：


lazyload插件如何添加参数：
$("img").lazyload({//参数添加到此位置，建议一行一个,用英文,作间隔});

1,用图片提前占位
placeholder : "img/grey.gif",

参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
2,载入使用何种效果
effect : "fadeIn",

参数：effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn

3,提前开始加载
threshold : 200,

参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

4,事件触发时才加载
event : "click",

参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…

5,对某容器中的图片实现效果
container: $("#container"),

参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片

6,图片排序混乱时
failurelimit : 10,

参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.（这个功能我没试过）



Lazyload使用方法：
jquery，这是必须的。 附件中有，你也可以开网上下载
jquery.lazyload.js附件中有，你也可以开网上下载

ecshop有的模板会不兼容jquery，所以务必到网上搜一下解决办法，这个我就不多讲了，现在大多模板都修改过了。

头部添加：
<script type="text/javascript" src="**你的位置**/js/jquery.js"></script>

底部添加：（放底部的道理你懂的）
<script type="text/javascript" src="**你的位置**/js/jquery.lazyload.js"></script>

——老杨，承接一切ecshop二次开发、整站建设，QQ:359199843——老杨最近整理的导航贴

ecshop仿京东 装机大师 最完善版（保存发布配置、后台管理等一系列完善功能）

ecshop 最完美全站多城市切换 后台管理 可扩展性强

老杨 纯晒功能 一个整站开发 大家看看有没有中意的功能

ecshop 注册项强大功能开发（含不同注册类型、注册后台审核）

老杨 纯晒功能 又一个整站开发 大家看看有没有喜欢的功能


ECSHOP仿走秀团购全功能

ECSHOP仿唯品会闪购全功能

ECSHOP仿麦包包留言板全功能，带留言查询（输入email\qq\手机查询）

ECSHOP合作登录功能等大量插件

ECSHOP QQ、新浪、支付宝、人人等合作登录功能插件 含后台设置功能（可选）

【共享】商品详情页添加购买数量加减按钮[ 增加购物车页面数量加减按钮 添加的代码]

【分享】发现很多新手不知道拿了模板怎么用，老杨在这粗略的解答一下

【分享】ecshop加快载入速度，也是最实用和炫丽的ecshop优化技巧-lazyload实用进阶

——老杨，承接一切ecshop二次开发、整站建设，QQ:359199843


看了会用了，但老杨说jquery.lazyload.js要放在底部。
这是因为什么因素阿？

受用了！！！