Lazy Load

Image lazy loader plugin for jQuery.

• weblog
• projects
• cv

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.

Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac. Demo page is available.

How to use?

Lazy Load depends on jQuery (doh!) and dimensions by Brandon Aaron (dimensions is now included in jQuery core). Include them in your header:

and in your code do:

$("img").lazyload();

This causes all images below the fold to be lazy loaded.

Setting sensitivity

There are options for control maniacs who need to finetune. You can set threshold on how close to the edge (don’t push me too far) image should come before it is loaded. Default is 0 (when it is visible).

$("img").lazyload({ threshold : 200 });

Setting threshold to 200 causes image to load 200 pixels before it is visible.

Placeholder image

You can also set placeholder image and custom event to trigger loading. Place holder should be an url to image. Transparent, grey and white 1×1 pixel images are provided with plugin.

$("img").lazyload({ placeholder : "img/grey.gif" });

Event to trigger loading

Event can be any jQuery event such as click or mouseover. You can also use your own custom events such as sporty or foobar. Default is to wait until user scrolls down and image appears on the window. To prevent all images to load until their grey placeholder image is clicked you could do:

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

Using effects

By default plugin waits for image to fully load and calls show() to show it. You can use any effect you want. Following code uses fadeIn effect. Check how it works at effect demo page.

$("img").lazyload({placeholder : "img/grey.gif",effect : "fadeIn"});

Images inside container

You can also use plugin for images inside scrolling container, such as div with scrollbar. Just pass the container as jQuery object. There is a demo for horizontal and vertical container.

#container {height: 600px;overflow: scroll;}

$("img").lazyload({placeholder : "img/grey.gif",container: $("#container")});

When images are not sequential

After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failurelimit option.

$("img").lazyload({failurelimit : 10});

Setting failurelimit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold. If you have a funky layout set this number to something high.

Delayed loading of images.

Not exactly feature of Lazy Load but it is also possible to delay loading of images. Following code waits for page to finish loading (not only HTML but also any visible images). Five seconds after page is finished, below the fold images are loaded automatically. You can also check the delayed loading demo.

$(function() {$("img:below-the-fold").lazyload({placeholder : "img/grey.gif",event : "sporty"});});$(window).bind("load", function() {var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);});

Download

Latest source, minified or packed.

Known problems

Due to webkit bug #6656 Lazy Loading wont give you any improvements in Safari. It will load all images you wanted it or not.

It seems jQuery 1.3.x breaks the plugin for IE. All images get loaded in the background even when they should not. I am working on it. In the meanwhile stay with jQuery 1.2.6.

Also you are using Mint you should have mint tag in the header of the page. Mint tag in the end of the page interferes with Lazy Load plugin. This is rather peculiar problem. If somebody finds an answer let me know.

advertising code estonia finland frog google helsinki javascript jeditable jquery latvia maps marketing mephisto mint mobile osx paldiski pärnu pear php rails riga solaris tallinn wakeboard whoa work yawn