Blazy
This documentation needs work. See "Help improve this page" in the sidebar.
Blazy module provides integration with bLazy to lazy load and multi-serve images to save bandwidth and server requests. The user will have faster load times and save data usage if they don't browse the whole page.
A friend of mobile devices. Do not let images, especially iframes, kill mobile device traffics.
Features
- Supports lazyloading core Image.
- Supports lazyloading core Responsive image. Only compatible with
<img>
element, but not<picture>
, yet. Read more. - Supports Colorbox/Photobox.
- Supports Retina display via descriptors/multipliers.
- Multi-serving images for configurable breakpoints, almost similar to core Responsive image, only less complex.
- CSS background lazyloading, or see also Mason, GridStack, and Slick carousel.
- IFRAME urls via custom coded, or see also Slick Video, Slick Media.
- Delay loading for below-fold images until 100px (configurable) before they are visible in the viewport.
- A simple, effortless CSS loading indicator.
- It doesn't take over all images, so it can be enabled as needed via Blazy formatter, or its supporting modules.
Requirements
- bLazy v1.6.0+ library:
- Download bLazy from https://github.com/dinbror/blazy
- Extract it as is, rename "blazy-master" to "blazy", so the assets are at:
/libraries/blazy/blazy.min.js
Installation
Install the module as usual, more info can be found on:
http://drupal.org/documentation/install/modules-themes/modules-7
Be sure to read its README.txt for troubleshooting.
Usages
Be sure to enable Blazy UI which can be uninstalled at production later.
- Go to Manage display page, e.g.: admin/structure/types/manage/page/display
- Find "Blazy" formatter under "Manage display".
- Go to "admin/config/media/blazy" to manage few global options, including enabling support for lazyloading core Responsive image.
For custom usages:
- Add a class "b-lazy" along with a "data-src" attribute refers to an expected image or iframe URL, or to any supported element:
- IMG, IFRAME or DIV/BODY, etc.
Non-media element, DIV/BODY/etc., will have background image lazyloaded instead. - Wrap the parent container with [data-blazy] attribute containing the expected options to limit the scope.
- And load the blazy library accordingly.
Modules that integrate with, or require Blazy
Similar modules
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion