Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

Load Product Images by scrolldown in list page Magento


Download the following js file and add in your js folder.

jquery.js
scrolling.js

Now add this js in your page.xml

     <action method="addJs"><script>jquery.js</script></action>
     <action method="addJs"><script>scrolling.js</script></action>

go to app/design/frontend/default/[YOUR THEME]/template/catalog/product/list.phtml
add this script on top of your list page

<script type="text/javascript">
     $(document).ready(function(){
       $('img.lazy').jail({
       effect : "fadeIn"
     });
});
</script>

replace your image with following code in line near by 58.

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

"spacer.gif" is default image of magento in your theme.


Please support us, Like us on Facebook.

  1. Hi Hardik, I tried to implement your solution, but didn't work...
    Maybe I put edit in the wrong location of page.xml your action methods.
    Another thing could clarify what are the codes that is nearby of line 58?

    ReplyDelete
  2. Hi Sir,
    I have a big problem i think it simple for you.

    When we go to the list page, if i hover on product there will be 4-5 images should be slide. example for click on this link http://www.dailylook.com/c/All-Products/1/100.html?filters=attribute~1~all-attrib

    Thanks in advance

    ReplyDelete
  3. Is there a ready demo available to view the code in action?

    ReplyDelete
  4. Hi,
    Thanks for your code!
    However, I think that we also use an extension to make it more simple
    I have been using Lazy Image Loader to allow your site to load images only when scrolling down the page.
    http://bsscommerce.com/magento-lazy-image-loader.html

    ReplyDelete
  5. Thanks for sharing!
    There is another quicker way is using an extension. Try this module Infinite Scroll for Magento 2.

    The module combines two methods of loading the next page of products list: automatically with Ajax and manually by Load More button, accompanying with Back to Top button and lazy loading image. Hence it will absolutely prolong your customers's scrolling experience.

    Try it here: http://bsscommerce.com/magento-infinite-scroll-for-magento-2.html

    ReplyDelete

 

Copyright @ 2017 HKBlog.