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.
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