Drupal Association members fund grants that make connections all over the world.
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.
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:
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
<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.
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.
- Download and install lazyloader and libraries modules in
- Download the echo library and place it in sites/all/libraries so that
echo.min.jsare found in
- Enable the module and clear your cache.
- Maintenance status: Actively maintained
- Development status: Under active development
- Reported installs: 3,520 sites currently report using this module. View usage statistics.
- Downloads: 26,009
- Automated tests: Enabled
- Last modified: July 3, 2016
- Stable releases are covered by the security advisory policy.
Look for the shield icon below.