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(){
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.
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.
Subscribe to:
Post Comments (Atom)
Hi Hardik, I tried to implement your solution, but didn't work...
ReplyDeleteMaybe 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?
Hi Sir,
ReplyDeleteI 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
Is there a ready demo available to view the code in action?
ReplyDeleteHi,
ReplyDeleteThanks 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
Thanks for sharing!
ReplyDeleteThere 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