JS_BRAMUS.lazierLoad 0.4

JS_BRAMUS.lazierLoad, a Javascript Image Lazy Loader has been updated to version 0.4 thanks to some excellent suggestions by mo from pictor.us

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 (and only) change is that version 0.4 brings back the option to override the default settings from within the constructor. This behavior was available in 0.2 (but kinda undocumented), but dropped in 0.3 (in a lesser bright moment of me pondering). Upon request by mo from pictor.us, the option has been brought back.

To easily implement this, a lazierLoadAutoHook parameter got introduced. If set to true, JS_BRAMUS.lazierLoad will automagically start itself. When set to false one must manually invoke a new instantiation of JS_BRAMUS.lazierLoad.

Since 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”)

These default options can now be easily overriden from within the constructor.

Cool, is there a demo?

lazierload.gif

TIP: scroll down really really fast 😉

Where can I download it?

Right here:

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

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 …)

Join the Conversation

5 Comments

  1. Hey, have you tested on Safari, I visited the demo page in Safari, looking from the Safari “activity windows”, it seems that the page loads all images regardless of being inside or outside of the viewport.

Leave a comment

Leave a Reply to Bramus! Cancel reply

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.