Blazy

Last updated on
11 March 2021

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:

/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

Page status: Needs work

You can: