Lazy Load Images jQuery Plugin

Blog Projects
JavaScript jQuery Lazy Load
HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac. After reading YUI introduction I though this is cool! After reading through source thought changed to this needs some jQuery simplicity So I stole borrowed couple of great ideas from Matt’s code. Result is Lazy Load plugin for jQuery.

What does it do?

It delays loading of images in (long) pages. Images below the fold (far down in the page) wont be loaded before user scrolls down. This is exact opposite of image preloading. With long pages containing heavy image content end user result is the same. Page feels snappier. Browser is in ready state after loading visible images. No need to wait for n pictures to load.

From Wikipedia: Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program's operation if properly and appropriately used.

That said Matt’s code does much more. I was only after lazy loading and simplicity of use. If you need more features go for YUI.

Show me more!

Demo page is available. For download and usage instructions info see Lazy Load project page. Or check under the hood.

Related entries: Sequentially Preloading Images With jQuery

When asking a question include an URL to example page where the problem occurs. Even better is to make a Fiddle which demonstrates the problem. If you have longer code examples please use