Blazy

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

• Optional core Image
• 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

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.

Similar modules

• lazyload
• lazyloader