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.

Read More