Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down they are loaded when needed. Shift-reload to test again

Installation/Configuration

Include the needed javascript (2 files) in your HTML document

HTML:
      <!-- lazierLoad prerequisites : prototype.js - version 1.6.0 final or greater required! -->
      <script type="text/javascript" src="js/lib/prototype.js"></script>
         <!-- lazierLoad core -->
      <script type="text/javascript" src="js/bramus/lazierLoad.js"></script>

Configuration

Automatic hooking of lazierLoad - Configuring the default options

If you are not happy with the default settings, you can tweak lazierLoad by editing the lazierLoadDefaultOptions Object in the lazierLoad.js file.

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

Manual hooking of lazierLoad - Configuring page-specific options

If you want different options on different pages, then set lazierLoadAutoHook to false and manually create a new JS_BRAMUS.lazierLoad instance yourself. Within that manual instantiation you can pass in specific parameters. If set, these parameters will override the default parameters set in the lazierLoadDefaultOptions Object.

Some examples are (only include one instantiation per page though!):

[removed]
      Event.observe(document, 'dom:loaded', function() {
          myCustomLL = new JS_BRAMUS.lazierLoad({treshold: 200});  // Override treshold
      }, false);

[removed]
      Event.observe(document, 'dom:loaded', function() {
          myCustomLL = new JS_BRAMUS.lazierLoad({loadingImage: 'bigspinner.gif', minWidth : 200, minHeight; 200}); // Override spinner, minWidth and minHeight
      }, false);

[removed]
      Event.observe(document, 'dom:loaded', function() {
          myCustomLL = new JS_BRAMUS.lazierLoad({extensions: ['png','jpg']}); // Override extensions : Only JPG's and PNG's
      }, false);

[removed]
      Event.observe(document, 'dom:loaded', function() {
          myCustomLL = new JS_BRAMUS.lazierLoad({treshold : 150, extensions : ['png','jpg','jpeg'], replaceImage : "blank.gif", loadingImage : "bigspinner.gif", minWidth : 200,  minHeight : 200}); // Override all options.
      }, false);