Friday, September 7th, 2007

Lazy Load Plugin for jQuery

Category: JavaScript, Library

Mika Tuupola took inspiration from the YUI ImageLoader and created a lazy load plugin for jQuery.

You can see the difference in action by comparing the lazy page to the “normal” agressive image downloader page.

To use the library, after script src’ing it you can simply:

javascript

  1. $("img").lazyload();

Or you can tweak it via options such as setting a placeholder image, and an event.

javascript

  1. $("img").lazyload({
  2.     placeholder : "img/grey.gif",
  3.     event : "click"
  4. });

Posted by Dion Almaer at 8:25 am
7 Comments

++++-
4.1 rating from 44 votes

7 Comments »

Comments feed TrackBack URI

Doesn’t seem to have any effect in Safari, but works well in FF.

Comment by Trevor — September 7, 2007

Whatever happened to the lowsrc attribute?

Comment by Andy — September 7, 2007

wouldn’t this be a lot easier to use than lowsrc (having to set that attribute for every image you wanted)?

Comment by mdmadph — September 7, 2007

Neat idea, but I have an expectation that everything will be loaded and viewable when I go below the fold. Waiting again is frustrating and time consuming.

Comment by Shaun Kester — September 7, 2007

of course its a lot easier that the lowsrc attribute setup. but it really doesnt work on opera, too.

Comment by Burcu — September 7, 2007

Yes, Safari insist to load original images even though src attribute has been changed or removed. If anyone has a solution to that let me know. With IE and FF everything works as expected. Page itself is still fully viewable and working with Safari. Lazy loading just don’t happen

That said lazy loading does not make sense to every website. For photoblogs and others with long pages and heavy image content story is different. If nothing else it can help you to reduce bandwith usage.

Setting threshold parameter to big enough number user must not wait images to load. Lets say you have n images size of 800×600. Set threshold to 600. User scrolls down and image #6 appears. Lazy Load plugin now starts to load image #7 (600 pixels before it is visible). When user scrolls yet more image #7 is probably already loaded.

Regarding lowsrc. I though it was never part of any standard?

Comment by Mika Tuupola — September 7, 2007

Hi, I’have just started using this plugin and it looks nice, but when I try to use it for a large number of pictures (300 – 500 small .png thumbnails) it works horrible – the page starts choking and it works very slow. Is there any way to solve this problem??

Comment by rock — October 17, 2007

Leave a comment

You must be logged in to post a comment.