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:
-
-
$("img").lazyload();
-
Or you can tweak it via options such as setting a placeholder image, and an event.
JAVASCRIPT:
-
-
$("img").lazyload({
-
placeholder : "img/grey.gif",
-
event : "click"
-
});
-
4.4 rating from 22 votes
Doesn’t seem to have any effect in Safari, but works well in FF.
Whatever happened to the lowsrc attribute?
wouldn’t this be a lot easier to use than lowsrc (having to set that attribute for every image you wanted)?
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.
of course its a lot easier that the lowsrc attribute setup. but it really doesnt work on opera, too.
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?
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??