This project is not covered by Drupal’s security advisory policy.

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. Works with <img> and <picture> elements. Works with IE9+.
  • Supports Colorbox/ Photobox/ PhotoSwipe, also multimedia lightboxes.
  • 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, Blazy Video, Blazy Image with Media, or see also Slick Video, Slick Media.
  • Delay loading for below-fold images until 100px (configurable) before they are visible at viewport.
  • A simple effortless CSS loading indicator.
  • It doesn't take over all images, so it can be enabled as needed via Blazy formatters, or its supporting modules.

Requirements

Installation

Install the module as usual, more info can be found on:
http://drupal.org/documentation/install/modules-themes/modules-7

Usages

Enable Blazy UI which can be uninstalled at production later.

  • Go to "/admin/config/media/blazy" to manage few global options, including enabling support for lazyloading core Responsive image.
  • Go to Manage display page, e.g.:
    /admin/structure/types/manage/page/display
    Find "Blazy" formatter under "Manage display".

For custom usages:

  • Add a class "b-lazy" along with a "data-src" attribute referring 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.
  • And load the blazy library accordingly.

Check out blazy.api.php for details.

Enhancements

Blazy works with fields and Views, and supports a few enhancements.

Optional Features

  • Views fields:
    File ER and Media Entity integration, see Slick Browser. Suitable for huge galleries with lightboxes, or multimedia switcher.
  • Views style plugin Blazy Grid:
    CSS3 Masonry and Block Grid Foundation.
  • Field formatters:
    Blazy, Blazy Video via Video Embed Field integration, and Blazy Image with Media integration via Video Embed Media integration.

Similar modules

Read update SOP whenever updating Blazy and its related modules.

Project Information

Downloads