Coding Tips & Tricks


Home > jQuery

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.

Homer & Monkey

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.

Javascript References

Then add the javascript.

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, check it out.








Comments

Aslam - 8/2/2010
Nice post. However, LazyLoading plugin is a sham. If you use fidler you will realise that what "APPEARS" to lazy load has already been loaded at page load time. A second request is sent out when you scroll down. So essentially you end up sending two HTTP requests for one image.

DC - 8/17/2010
Yep. I found this to be true as well. It doesn't work in Firefox. Loads images anyway so the page load time doesn't get improved. Anyone else find issues?

HC - 12/11/2010
Will Lazyload work with Infinate Scroll?

Pat - 2/16/2011
Definitely appears to NOT work in Firefox. It will display the effect properly, but observing this in Firebug I notice that the images I've specified still load immediately.

Pat - 2/16/2011
... however it does appear to be working on your site. At this point, I'm not sure what's causing it not to work for me but still work fine for you.

Unitech - 6/21/2011
Thanks for the post . .

p0is0n - 10/21/2011
Fork with update: https://github.com/p0is0n/jquery.lazyload


Add your comment

300 Characters left


Please fill this in to confirm that you are human