How to get Lazy image like Jet.comLoading small image from product gallery every x seconds when mouse hover on image in product listHow to get Store logo and image alt in magentoGet all Images except “base image” and “small image”How to get the image type in media image collection?How to add Dynamic Image url for Product in MagentoHow can I fix image size?How to get product images based on image type?get image by position and resizeUpload image with Ajax in M2Magento 2 Admin - Edit Products - Disable Lazy Loading

How could indestructible materials be used in power generation?

Took a trip to a parallel universe, need help deciphering

Brothers & sisters

How do I write bicross product symbols in latex?

Why are electrically insulating heatsinks so rare? Is it just cost?

What exploit are these user agents trying to use?

Can a virus destroy the BIOS of a modern computer?

In a Spin are Both Wings Stalled?

How to say in German "enjoying home comforts"

What is going on with Captain Marvel's blood colour?

Is it canonical bit space?

Is there a hemisphere-neutral way of specifying a season?

Could gravitational lensing be used to protect a spaceship from a laser?

Why can't we play rap on piano?

I Accidentally Deleted a Stock Terminal Theme

What is the word for reserving something for yourself before others do?

Is it possible to create light that imparts a greater proportion of its energy as momentum rather than heat?

Is it inappropriate for a student to attend their mentor's dissertation defense?

What do you call someone who asks many questions?

Infinite Abelian subgroup of infinite non Abelian group example

Why is it a bad idea to hire a hitman to eliminate most corrupt politicians?

What's the difference between 'rename' and 'mv'?

Neighboring nodes in the network

Do I have a twin with permutated remainders?



How to get Lazy image like Jet.com


Loading small image from product gallery every x seconds when mouse hover on image in product listHow to get Store logo and image alt in magentoGet all Images except “base image” and “small image”How to get the image type in media image collection?How to add Dynamic Image url for Product in MagentoHow can I fix image size?How to get product images based on image type?get image by position and resizeUpload image with Ajax in M2Magento 2 Admin - Edit Products - Disable Lazy Loading






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








0















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










share|improve this question
















bumped to the homepage by Community 18 mins ago


This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.





















    0















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










    share|improve this question
















    bumped to the homepage by Community 18 mins ago


    This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

















      0












      0








      0


      2






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










      share|improve this question
















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







      magento-1.9 javascript css products product-images






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Mar 23 '17 at 19:54







      Rajiv

















      asked Mar 23 '17 at 14:11









      RajivRajiv

      94115




      94115





      bumped to the homepage by Community 18 mins ago


      This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.







      bumped to the homepage by Community 18 mins ago


      This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.






















          2 Answers
          2






          active

          oldest

          votes


















          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.






          share|improve this answer

























          • 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






          share|improve this answer























          • 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 -> skinfrontenddefaultdefaultjsmgt_lazy_image_loaderjquery-1.7.2.min.js

            – Gem
            Jun 7 '18 at 10:10











          Your Answer








          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "479"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f165856%2fhow-to-get-lazy-image-like-jet-com%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          2 Answers
          2






          active

          oldest

          votes








          2 Answers
          2






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          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.






          share|improve this answer

























          • 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














          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.






          share|improve this answer

























          • 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












          0








          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.






          share|improve this answer















          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.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Mar 23 '17 at 16:09









          Ben Crook

          9,2322477




          9,2322477










          answered Mar 23 '17 at 15:20









          Asheem PatroAsheem Patro

          723623




          723623












          • 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

















          • 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
















          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





          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





          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






          share|improve this answer























          • 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 -> skinfrontenddefaultdefaultjsmgt_lazy_image_loaderjquery-1.7.2.min.js

            – Gem
            Jun 7 '18 at 10:10















          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






          share|improve this answer























          • 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 -> skinfrontenddefaultdefaultjsmgt_lazy_image_loaderjquery-1.7.2.min.js

            – Gem
            Jun 7 '18 at 10:10













          0












          0








          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






          share|improve this answer













          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







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Mar 24 '17 at 4:19









          Murtuza ZabuawalaMurtuza Zabuawala

          12.7k73362




          12.7k73362












          • 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 -> skinfrontenddefaultdefaultjsmgt_lazy_image_loaderjquery-1.7.2.min.js

            – Gem
            Jun 7 '18 at 10:10

















          • 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 -> skinfrontenddefaultdefaultjsmgt_lazy_image_loaderjquery-1.7.2.min.js

            – Gem
            Jun 7 '18 at 10:10
















          HI Thanks for your answer. I'll try and update with you

          – Rajiv
          Mar 25 '17 at 10:54





          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






          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






          @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






          @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 -> skinfrontenddefaultdefaultjsmgt_lazy_image_loaderjquery-1.7.2.min.js

          – Gem
          Jun 7 '18 at 10:10





          @MurtuzaZabuawala I am removed the file -> skinfrontenddefaultdefaultjsmgt_lazy_image_loaderjquery-1.7.2.min.js

          – Gem
          Jun 7 '18 at 10:10

















          draft saved

          draft discarded
















































          Thanks for contributing an answer to Magento Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f165856%2fhow-to-get-lazy-image-like-jet-com%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Disable / Remove link to Product Items in Cart Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?How can I limit products that can be bought / added to cart?Remove item from cartHide “Add to Cart” button if specific products are already in cart“Prettifying” the custom options in cart pageCreate link in cart sidebar to view all added items After limit reachedLink products together in checkout/cartHow to Get product from cart and add it againHide action-edit on cart page if simple productRemoving Cart items - ObserverRemove wishlist items when added to cart

          Helsingin valtaus Sisällysluettelo Taustaa | Yleistä sotatoimista | Osapuolet | Taistelut Helsingin ympäristössä | Punaisten antautumissuunnitelma | Taistelujen kulku Helsingissä | Valtauksen jälkeen | Tappiot | Muistaminen | Kirjallisuutta | Lähteet | Aiheesta muualla | NavigointivalikkoTeoksen verkkoversioTeoksen verkkoversioGoogle BooksSisällissota Helsingissä päättyi tasan 95 vuotta sittenSaksalaisten ylivoima jyräsi punaisen HelsinginSuomalaiset kuvaavat sotien jälkiä kaupungeissa – katso kuvat ja tarinat tutuilta kulmiltaHelsingin valtaus 90 vuotta sittenSaksalaiset valtasivat HelsinginHyökkäys HelsinkiinHelsingin valtaus 12.–13.4. 1918Saksalaiset käyttivät ihmiskilpiä Helsingin valtauksessa 1918Teoksen verkkoversioTeoksen verkkoversioSaksalaiset hyökkäävät Etelä-SuomeenTaistelut LeppävaarassaSotilaat ja taistelutLeppävaara 1918 huhtikuussa. KapinatarinaHelsingin taistelut 1918Saksalaisten voitonparaati HelsingissäHelsingin valtausta juhlittiinSaksalaisten Helsinki vuonna 1918Helsingin taistelussa kaatuneet valkokaartilaisetHelsinkiin haudatut taisteluissa kaatuneet punaiset12.4.1918 Helsingin valtauksessa saksalaiset apujoukot vapauttavat kaupunginVapaussodan muistomerkkejä Helsingissä ja pääkaupunkiseudullaCrescendo / Vuoden 1918 Kansalaissodan uhrien muistomerkkim

          Adjektiivitarina Tarinan tekeminen | Esimerkki: ennen | Esimerkki: jälkeen | Navigointivalikko