notebook

From Wikipedia:
Lazy loading is a design pattern commonly used in computer programming to defer
initialization of an object until the point at which it is needed. It can contribute
to efficiency in the program’s operation if properly and appropriately used.

Inspired by:
http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin

Requires:
Prototype.js version 1.6.0_rc0 or later
A page with lots of big images below the fold (optional)
*/

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
var scroll_y = self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
return parseInt(scroll_y);
}
function $height()
{
// this function returns the height of the viewport
var window_height = window.innerHeight || document.documentElement.clientHeight;
return parseInt(window_height);
}
var element = $(element);
var options = Object.extend({
threshold : 0,
placeholder : '/images/grey.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);
}
});