1

How can I set my logo like jet.com before loading images enter image description here enter image description here

0

You can change the Product Placeholder Image in the backend or admin panel of your Magento installation. If you are facing any problem please let me know.

Please check this link for you reference.

  • I'm not sure if this is what the question was referring to, based on those screenshots it seems that the images are loaded via AJAX and the placeholder only displays before those images have loaded. Won't this admin change only affect products that don't have any images set? – Ben Crook Mar 23 '17 at 16:11
  • HI, Ben Crook, I need same as like Jet.com How can I get same as like that? Is there any extension for this? – Rajiv Mar 23 '17 at 18:37
0

For your requirement here is free extension is available, you can use this ready solution.

https://github.com/mgtcommerce/Mgt_LazyImageLoader

after installing this extension , include this extension in your page by modifying its

mgt_lazy_image_loader.xml

IN your case you need to modify as below

<?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

<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) ?>" />

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

  • HI Thanks for your answer. I'll try and update with you – Rajiv Mar 25 '17 at 10:54
  • I tried on my dev site but it is not showing. I am using custom design so I need to change any path? Please check my site and suggest me. – Rajiv Apr 20 '17 at 13:58
  • @Murtuza : after install, my product listing page image is empty, what i need to do? – Gem Jun 7 '18 at 8:45
  • @Rathinam remove jquery from layout js/mgt_lazy_image_loader/jquery-1.7.2.min.js becuase your theme might already include it – Murtuza Zabuawala Jun 7 '18 at 9:12
  • @MurtuzaZabuawala I am removed the file -> skin\frontend\default\default\js\mgt_lazy_image_loader\jquery-1.7.2.min.js – Gem Jun 7 '18 at 10:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.