I would like to introduce you this simple but very efficient plugin that will help us speed up the downloading time of our web pages. I am talking about mr Mika Tuupola’s Lazy Load JQuery Plugin.

This plugin loads the images of a web page as the user scrolls to their position, that is, images wont load until they are not within the visible viewport margins of the window.

How to use

First we need to insert the following references into our code


<!-- insert a reference to jquery and the jquery.lazyload plugin -->
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

And now this few lines of code in our document.ready function


<script type="text/javascript">
$(function() {
          $("img").lazyload({
              placeholder : "img/grey.gif",
              effect      : "fadeIn"
           });
       });
< /script>

And that’s it! Easy right?