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="/loader.gif" 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="/loader.gif" 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，大功告成！！！！