• 欢迎访问magento4you博客,我们提供magento建站、技术咨询、IT运维、支持培训、二次开发服务及模板定制,联系QQ:283475615
  • Magento入门教程 二次开发 模板定制 联系QQ:283475615
  • magento运营 SEO SEM 数字营销 广告竞价 联系QQ:283475615
  • 如果您觉得本站对你有帮助,那么赶紧使用Ctrl+D 收藏吧!

magento lazyload解决方案

Magento开发 magento4you 6年前 (2015-05-09) 2412次浏览 0个评论

magneto框架速度确实慢,也是因为她的可扩展性高,不过还有一些途径来解决它,其中一个就是使用lazyload。

访问天猫的时候会发现她的图片加载是一段一段的,这就是所谓懒加载,原来我做了一个网站,用的就是懒加载: 示例网站 ,但是在做magento网站时发现修改就没这么简单了,下面我一一来说应该如何在magento中添加懒加载。

1、首先将lazyload的js文件加入项目中,在根目录下js文件夹中添加lazy文件夹

2、接下来就要加载这些文件了,开发app/design/frontend/megatron/default/layout/local.xml 这个文件,添加以下代码:

<span class="comment"><!-- lazyload --></span>
            <span class="tag"><<span class="title">action</span> <span class="attribute">method</span>=<span class="value">"addJs"</span>></span><span class="tag"><<span class="title">script</span>></span><span class="javascript">lazy/lazy-image-loader.js</span><span class="tag"></<span class="title">script</span>></span><span class="tag"></<span class="title">action</span>></span>
            <span class="tag"><<span class="title">action</span> <span class="attribute">method</span>=<span class="value">"addJs"</span>></span><span class="tag"><<span class="title">script</span>></span><span class="javascript">lazy/common.js</span><span class="tag"></<span class="title">script</span>></span><span class="tag"></<span class="title">action</span>></span>

3、现在js文件已经引入了,接下来要在图片显示的代码里面修改加载方式,在

\app\code\local\Etheme\Megatronconfig\Helper\Data.php 路径下打开文件,修改两个地方:

a\搜索:

$rollover_image=

后面的代码替换为:

<span class="variable">$rollover_image</span>=<span class="string">'<img src="/loader.gif" data-src="'</span>.<span class="variable">$el</span>->helper(<span class="string">'catalog/image'</span>)->init(<span class="variable">$_product</span>, <span class="string">'small_image'</span>,<span class="variable">$_image</span>->getFile())->resize(<span class="variable">$widthBig</span>, <span class="variable">$heightBig</span>) . <span class="string">'" class="lazy img-responsive  animate scale product-retina" data-image2x="'</span> . <span class="variable">$el</span>->helper(<span class="string">'catalog/image'</span>)->init(<span class="variable">$_product</span>, <span class="string">'small_image'</span>,<span class="variable">$_image</span>->getFile())->resize(<span class="variable">$widthBig</span> * <span class="number">2</span>, <span class="variable">$heightBig</span> * <span class="number">2</span>) . <span class="string">'"    alt="'</span> . <span class="variable">$el</span>->stripTags(<span class="variable">$_product</span>->getName(), null, true) . <span class="string">'">'</span>;

b\搜索:

$html[]=

后面的代码替换为:

<span class="variable">$html</span>[]=<span class="string">'<img src="/loader.gif" data-src="'</span>.<span class="variable">$image_src</span>.<span class="string">'" class="lazy product-retina img-responsive"   data-image2x="'</span> . <span class="variable">$el</span>->helper(<span class="string">'catalog/image'</span>)->init(<span class="variable">$_product</span>, <span class="string">'small_image'</span>)->resize(<span class="variable">$widthBig</span> * <span class="number">2</span>, <span class="variable">$heightBig</span> * <span class="number">2</span>) . <span class="string">'"  alt="'</span> . <span class="variable">$el</span>->stripTags(<span class="variable">$_product</span>->getName(), null, true) . <span class="string">'">'</span>;

4、在后台刷新以下缓存,如何合并js、css得取消合并。刷新下页面,ok,大功告成!!!!


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:magento lazyload解决方案
喜欢 (0)
发表我的评论
取消评论

*

code

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址