lazierLoad is Bramus! his take at writing a delayed javascript image loader for use with PrototypeJS.

lazierLoad automatically hooks itself to the page, finds all images and only loads those appearing “above the fold” resulting in faster page loads. 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.

Installation:
#

Include the needed javascript (2 files) in your HTML document
PLAIN TEXT
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>

2: That’s it, you’re done!

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!):

JavaScript:

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

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

Demo: http://www.bram.us/projects/js_bramus/lazierload/#demo
Download: http://www.bram.us/wordpress/download.php?file=http://www.bram.us/wordpress/wp-content/uploads/2008/02/lazierload_04.zip
Source: http://www.bram.us/projects/js_bramus/lazierload

Related Listings:

1. Ajax Progress Bar Sometimes, when we are building websites and web applications, we...
2. Onload Image Fades Script A function to show an ‘image loading…’ message and subsequent...
3. iPhoto like Image Resize Upon seeing the Fluxiom intro video, I was compelled to...
4. jQIR – jQuery Image Replacemen Replace headings (or any text) with images. Parameters * format...
5. TripTracker Lightbox Image Script The TripTracker slideshow is a lightweight JavaScript image viewer with...

Do you like this post?

Email: