Lazy loader 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 opposite of image preloading. Using lazy load on long pages containing heavy image content makes page feels snappier. Browser is in ready state after loading visible images. No need to wait for unknown amount of pictures to 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. Include them in your header:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
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
Custom event can be any jQuery event such as click or mouseover. 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"
});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.
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. Also jQuery 1.1.4 had bug #1556 which caused plugin to run in IE after images were already loaded. This was fixed in jQuery 1.2. If you can not upgrade use jQuery 1.1.3.1 or older.