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.
So, what makes Lazyloader different?
- No need to download additional jquery plugin
- No need to configure anything
- It simply works, see demo