JS_BRAMUS.lazierLoad 0.3

JS_BRAMUS.lazierLoad, a Javascript Image Lazy Loader has been updated to version 0.3. Changes are compatibility with the latest Prototype version (, the introduction of a global options object to easily configure lazierLoad and some extra options such as minWidth, minHeight and extensions.

What is lazierLoad?

lazierLoad is a little JavaScript wichh automatically hooks itself to the page, finds all images and only loads those appearing “above the fold” resulting in faster page loads as the images not located in the viewport, are not loaded until they appear within it (viz. when the user scrolls down).

The idea for lazierLoad was inspired upon Lazy Load (which is built for use with jQuery), yet the code differs quite a lot.

What is new in this version?

The most important change is that version 0.3 introduces compatibility with Prototype 1.6 final or higher, something 0.2 was not capable of due to a rather huge change in how events are named between rc1 and the final.

Next to this compatibility issue, lazierLoad now holds a global config Object named lazyLoadOptions. This variable can easily be altered to reflect the options you want to use it with. In version 0.3 some new options were introduced: minWidth, minHeight and extensions.

In version 0.3, the possible options to tweak are:

  • treshold: images which appear treshold pixels from the bottom will be loaded
    (defaults to “100”)
  • replaceImage: image to replace the non-loaded images with until they are loaded (most likely a transparent 1 by 1 pixel image)
    (defaults to “blank.gif”)
  • loadingImage: image to show while a non-loaded image is being loaded
    (defaults to “spinner.gif”)
  • extensions: array of extensions to lazyLoad
    (defaults to “[‘gif’,’jpg’,’png’,’jpg’]”)
  • minWidth: minimum width an image must have in order to be lazyLoaded
    (defaults to “100”)
  • minHeight: minimum height an image must have in order to be lazyLoaded
    (defaults to “100”)

Cool, is there a demo?


TIP: scroll down really really fast 😉

Where can I download it?

Right here:

https://www.bram.us/wordpress;/wp-content/uploads/2008/02/lazierload_03.zip;Download lazierLoad 0.3;

Wow, you’re going to fast: I have a question, I need help, I need more info, how do I configure this thing?

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.