Attractive images are the heart of any application. However the page loading time can drastically increase if the application takes huge amount of time to load these images!
For such situations you need some way to reduce loading time for images. Lazyload Jquery Plugin would help you to achieve this. Lazyload only loads the images which are within the screen display region. Images outside this viewport (the current portion of the page that is seen) get loaded only when user scrolls the page. Since images get loaded on demand, it also helps to minimise the server load.
Setting up images for lazy loading.
Download jquery.lazyload.js and put it in your javascript folder and add some changes in your view after that you are done.
Include following in your application layout.
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script>
Assign a class to images for which you want lazyload effect, so that you can differentiate those images from others. This way you can easily control which images are set for lazy loading. You don’t need any specific definition for the CSS class – as we shall soon see, its mere mention is enough.
<img class="lazy" src="img/placeholder.jpg" data-original="img/original.jpg" width="400" heigh="200">
As we can see in the code snippet above, the ‘src’ attribute will have placeholder image and original image will be kept under ‘data-original’ attribute. A placeholder image is required along with the original image. Placeholder image can have any size. It’s preferred to have the same sizes as those of the images you want to display to ensure page alignment is not disturbed. It’s also recommend to have lighter images that match the background of the page.
Last but not the least, add the following javascript to your global JS file to load your images lazily.
$(document).ready(function() {
$("img.lazy").lazyload();
});
With this all images with class “lazy” gets loaded lazily. You can also add javascript effect, event for lazyload. Following snippet lazyload images with “fadeIn” effect.
$("img.lazy").lazyload({
effect : "fadeIn"
});
How do we handle cases where Javascript is disabled?
In case we need to support browsers with javascript disabled we can specify <noscript> block with original image inside.
<img class="lazy" src="img/placeholder.jpg" data-original="img/original.jpg" width="400" heigh="200"> <noscript><img src="img/original.jpg" width="400" heigh="200"></noscript>
To prevent display of placeholder and original image at the same time in case of javascript disabled browsers hide placeholder image.
.lazy { display: none; }
This ensures that we cater to all browsers – if JS is enabled, the images are loaded lazily, if JS is disabled, all the images are loaded first and the user experience is not disturbed.
Check out the following link for lazyload demo with fadeIn effect.
Josh Software 
This information is awesome Trupti!!!!
Thanks for sharing such info.
Pedro own is also very excited, “Today is the first time I scored a hat-trick, I’m really happy, very excited. Connected into three lob? Can sometimes into the ball, sometimes you can not enter or of luck, my luck is very good, three lob into the whole, however, the most important thing is to seize the Bosque gave me the opportunity. “without the ball, plus front Fanqiang, now coupled with the improvement of shooting skill, Pedro further enhance the role of Spain in the frontcourt, with the outside Jiabiliya comeback will further compress Torres space? Harvey said, “It was the coach needs to consider the problem., Let’s do not have to think too much. Short, Pedro is a very good and useful player in the field not only opened the width, and can create depth, I think no one has not ignored these advantages, not to mention he scored a hat-trick now, to know that this is not no one can casually they completed. ”
oakley frogskins http://www.2012oakleyglasses.com/