Magento 1 how to apply lazy load

Question

My site is very slow. So I have to decide to apply lazy load.

Someone please suggested me how to apply lazy load in magento 1?

Answer 1

Following free extension is available

https://github.com/mgtcommerce/Mgt_LazyImageLoader

After installing this extension , include this extension in your page you need to modify this file mgt_lazy_image_loader.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <catalog_category_default translate="label">
        <reference name="head">
            <action method="addItem"><type>skin_js</type><name>js/mgt_lazy_image_loader/jquery-1.7.2.min.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/mgt_lazy_image_loader/lazy-image-loader.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/mgt_lazy_image_loader/common.js</name></action>
        </reference>
    </catalog_category_default>
    <catalog_category_layered translate="label">
        <reference name="head">
            <action method="addItem"><type>skin_js</type><name>js/mgt_lazy_image_loader/jquery-1.7.2.min.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/mgt_lazy_image_loader/lazy-image-loader.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/mgt_lazy_image_loader/common.js</name></action>
        </reference>
    </catalog_category_layered>
    <catalogsearch_result_index translate="label">
        <reference name="head">
            <action method="addItem"><type>skin_js</type><name>js/mgt_lazy_image_loader/jquery-1.7.2.min.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/mgt_lazy_image_loader/lazy-image-loader.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/mgt_lazy_image_loader/common.js</name></action>
        </reference>
    </catalogsearch_result_index>
    <!--for home page-->
    <cms_index_index translate="label">
        <reference name="head">
            <action method="addItem"><type>skin_js</type><name>js/mgt_lazy_image_loader/jquery-1.7.2.min.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/mgt_lazy_image_loader/lazy-image-loader.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/mgt_lazy_image_loader/common.js</name></action>
        </reference>
    </cms_index_index>
    <!--end for home page-->
</layout>

After that for those image you want to lazy load modify img tag as below

add class lazy and put lazy image placeholder in src and put your orignal image in data-src attribute.

<img class="lazy" src="getSkinUrl('images/mgt_lazy_image_loader/loader.gif'); ?>" data-src="helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />

I hope this will help