Element.addMethods({
  lazyload: function(element, options){
    function $restore(){
      // this function restores the original image source; called when above the fold
      if ( true === $(element).hasAttribute('_src') ){
        $(element).writeAttribute({ src: $(element).readAttribute('_src') });
      }
    }
    function $scroll(){
      // this function returns the amount the page is scrolled vertically
      return parseInt(document.viewport.getScrollOffsets()[1]);
    }
    function $height(){
      // this function returns the height of the viewport
      return parseInt(document.viewport.getHeight());
    }
    var element = $(element);
    var options = Object.extend({
      threshold : 0,
      placeholder : 'Resources/_clear.gif',
      event : 'scroll',
      frequency : 0.1
      }, options || {});

    var offset = $(element).cumulativeOffset()[1];
    var activate_on = (offset - options.threshold) - $height();

    var old_source = $(element).readAttribute('src');
    var new_source = options.placeholder;

    $(element).writeAttribute({ src : new_source }).writeAttribute({ '_src' : old_source });

    if ( 'scroll' === options.event ){
      new PeriodicalExecuter(function($executor){
        if ( activate_on <= $scroll() ){
          $restore(); 
          $executor.stop();
        }
      }, options.frequency);
    }else{
      $(element).observe(options.event, function(event){
        $restore(); 
        $(element).stopObserving();
      });
    }
    return $(element);
  }
});

$$('img').invoke('lazyload',{placeholder:'Resources/ajaxloader2.gif'});