Image Lazyloader

This is a small helper module which will automatically lazyload all images for sites with multiple images, which will make the site load faster.

All images will only load when it's visible to the browser window.

Available Settings:
1) Enable/Disable
2) Distance - image distance from the viewable browser window before the actual image loads
3) Placeholder Image - stand-in image
4) Loader Icon - animating icon (shamelessly borrowed from ajaxblocks module)
5) Excluded Pages - page paths to be excluded from image lazyload

For other images:
You can also manually lazyload your other images not processed by Drupal image module by formatting your img markup to this:

Attributes:
1) src = path to placeholder image
2) data-src = path to actual image
3) width = add width for best result
4) height = add height for best result
5) Add a container block

Example:

<div class="image-container"><img src"/sites/default/files/image_placeholder.gif" data-src="/sites/default/files/actual_image.jpg" alt="Image" /></div>

Note: For best result, use Drupal 7.12 and above. (lower versions of Drupal 7 don't have image width and height attributes which are used by lazyloader for detecting image position and positioning of the wait icon). Due to a hook theme registery alter your cache has to be rebuilt first before the script can be triggered.

See Lazyloader Demo

Branch 2.x

The 1.x version has some implementation issues which makes solving certain bugs and implementing certain features impossible without a whole lot of work to both the php and javascript codebase. This is why the 2.x branch has been created. The 2.x branch will no longer have a custom lazyloading script, but uses the echo library for lazyloading. This also means a new dependency on the libraries module.

Development

All new development is done against the 2.x branch. Automated testing is added (required) for new features and bugfixes. Simple patches for 1.x are accepted as long as they are not disruptive.

Installation instructions

1. Download and install lazyloader and libraries modules in sites/all/modules/contrib
2. Download the echo library and place it in sites/all/libraries so that echo.js and echo.min.js are found in sites/all/libraries/echo/dist
3. Enable the module and clear your cache.

Similar Projects

• Block Lazyloader
• Node Lazyloader
• Lazyload
• Jail
• Lazy Image Loader

Related Project/s

• Lazyloader Filter

Sponsors

Promet Source, an Acquia Drupal partner company
Daniel Honrade, original author.