Lazy loading images with jQuery

Some of the articles written on this site are pretty image intensive and take up a lot of resources when loading up. An awesome way to improve page load times as well as providing a better user experience is to use lazy loading for your site.

There is a excellent jQuery plugin called Lazy Loader which delays the loading of images in long webpages. If you have a blog site like this or a site that has long posts and requires the user to scroll down, this might be a good option for you. Basically, it only loads the images inside the visible part of the page that the user is viewing. You may have already noticed this effect while browsing other sites, or even this site.

Another good thing about this plugin is that it is really easy to use. Take a look at this code for example:

First add the references to jQuery and the plugin.

Then add the javascript.

In order to get the greyed loading effect with your images, you will need to add a 1px grey image placeholder. Add the reference to the image in your code as above.

On this site there is a good example of a long article that uses lazy loading. If you are building your site for progressive enhancement, this will also just not load so the user won't notice anything different.

Check out the site for more info on this plugin.

I've also included a really simple example project, download here.