首页 > 代码库 > magento lazyload解决方案
magento lazyload解决方案
magneto框架速度确实慢,也是因为她的可扩展性高,不过还有一些途径来解决它,其中一个就是使用lazyload。
访问天猫的时候会发现她的图片加载是一段一段的,这就是所谓懒加载,原来我做了一个网站,用的就是懒加载:示例网站 ,但是在做magento网站时发现修改就没这么简单了,下面我一一来说应该如何在magento中添加懒加载。
1、首先将lazyload的js文件加入项目中,在根目录下js文件夹中添加lazy文件夹,上传这三个文件
2、接下来就要加载这些文件了,开发app/design/frontend/megatron/default/layout/local.xml 这个文件,添加以下代码:
<!-- lazyload --> <action method="addJs"><script>lazy/lazy-image-loader.js</script></action> <action method="addJs"><script>lazy/common.js</script></action>
\app\code\local\Etheme\Megatronconfig\Helper\Data.php 路径下打开文件,修改两个地方:
a\搜索:
$rollover_image=
后面的代码替换为:
$rollover_image='<img src=http://www.mamicode.com/"/loader.gif" data-src="'.$el->helper('catalog/image')->init($_product, 'small_image',$_image->getFile())->resize($widthBig, $heightBig) . '" class="lazy img-responsive animate scale product-retina" data-image2x="' . $el->helper('catalog/image')->init($_product, 'small_image',$_image->getFile())->resize($widthBig * 2, $heightBig * 2) . '" alt="' . $el->stripTags($_product->getName(), null, true) . '">';>b\搜索:
$html[]=
后面的代码替换为:
$html[]='<img src=http://www.mamicode.com/"/loader.gif" data-src="'.$image_src.'" class="lazy product-retina img-responsive" data-image2x="' . $el->helper('catalog/image')->init($_product, 'small_image')->resize($widthBig * 2, $heightBig * 2) . '" alt="' . $el->stripTags($_product->getName(), null, true) . '">';>4、在后台刷新以下缓存,如何合并js、css得取消合并。刷新下页面,ok,大功告成!!!!
magento lazyload解决方案
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。