Web Design Magazine | News, Tips, Blogs, Articles & Insights

Delay Loading of Images (In Long Pages)

Written by Pete Prestipino | Oct 23, 2009 5:00:00 AM

If you're a reader of Website Magazine's Design & Development Digest you are well aware of our affinity (actually it's nearing an obsession) with jQuery. Many of the plugins bring so much value to the Web experience that it's nearly criminal to not metnion those that really stand out when you come across them. Case in point - Lazy Load - a jQuery plugin developed by Mika Tuupola that delays the loading of images in long web pages.

If you've got a long web page with a lot of images then you're going to be impressed with Lazy Load. The plugin forces images outside of the viewport (the visible part of a web page) to not load until the user scrolls to them. The result is that pages load much faster.

Designers can set the threshold on how close to the edge an image should come before it is loaded. You can also set a placeholder image and a custom event to trigger loading. There's a lot more that goes along with it but those are the highlights. Enjoy and let us know what you think!