Image Lazyloader

Installs: 
461
Open Bugs: 
11
Development Status: 
Seeking co-maintainer(s)
Under active development

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

Similar Projects

Related Project/s

So, what makes Lazyloader different?

  • No need to download additional jquery plugin
  • No need to configure anything
  • It simply works, see demo

Sponsors

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

Releases: 
7.x-1.3
7.x-1.x-dev
Release Dates: 
08/02/2012
09/30/2013