Drupal blazy

Blazy module provides integration with drupal 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.

Add search to your website

Features

1. Supports lazyloading core Image.
2. Supports lazyloading core Responsive image. Only compatible with <img> element, but not <picture>, yet.
3. Supports Colorbox/Photobox.
4. Supports Retina display via descriptors/multipliers.
5. Multi-serving images for configurable breakpoints, almost similar to core Responsive image, only less complex.
6. CSS background lazyloading, or see also Mason, GridStack, and Slick carousel.
7. IFRAME URLs via custom code, or see also Slick Video, Slick Media.
8. Delay loading for below-fold images until 100px (configurable) before they are visible in the viewport.
9. A simple, effortless CSS loading indicator.
10. It doesn’t take over all images, so it can be enabled as needed via Blazy formatter, or its supporting modules.

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.