首页 > 代码库 > 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>


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

\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解决方案