JS_BRAMUS.lazierLoad 0.4

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.

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.

TIP: scroll down really really fast 😉

Right here:

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

Don’t worry my friend, there’s a full page here on bram.us devoted to lazierLoad where you can find all info about it.