bLazy for Drupal 8

README.md

bLazy for Drupal 8

This is a very simple, straight-forward way of implementing bLazy for the user uploaded images.

Images could be the programmatically rendered images through image.html.twig template; read image fields. Or could be the inline images added to content via CKEditor.

template_preprocess_image() hook implementation in the module take cares of overriding the variables for image.html.twig template.

And the filter plugin handles rewriting image markups for the inline-images. The filter plugin should be enabled for the desired text-formats to activate.

FilterLazyload.php

<?php

// This plug needs to be placed in a custom module:
// `modules/custom/YOURMODULE/src/Plugin/Filter/FilterLazyload.php`

namespace Drupal\YOURMODULE\Plugin\Filter;

use Drupal\Component\Utility\Html;
use Drupal\filter\FilterProcessResult;
use Drupal\filter\Plugin\FilterBase;

/**
 * Provides a filter to lazy-load images.
 *
 * @Filter(
 *   id = "filter_lazyload",
 *   title = @Translation("Lazyload images"),
 *   description = @Translation("Lazy load images via bLazy"),
 *   type = Drupal\filter\Plugin\FilterInterface::TYPE_TRANSFORM_REVERSIBLE,
 *   weight = 20
 * )
 */
class FilterLazyload extends FilterBase {

  /**
   * {@inheritdoc}
   */
  public function process($text, $langcode) {
    $result = new FilterProcessResult($text);

    $html_dom = Html::load($text);
    $images = $html_dom->getElementsByTagName('img');

    $placeholder_src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';

    foreach ($images as $image) {
      $src = $image->getAttribute('src');
      $image->removeAttribute('src');

      $image->setAttribute('data-src', $src);
      $image->setAttribute('src', $placeholder_src);

      $classes = $image->getAttribute('class');
      $classes = (strlen($classes) > 0) ? explode(' ', $classes) : [];
      $classes[] = 'b-lazy';
      $image->setAttribute('class', implode(' ', $classes));
    }

    $result->setProcessedText(Html::serialize($html_dom));

    return $result;
  }

  /**
   * {@inheritdoc}
   */
  public function tips($long = FALSE) {
    return $this->t('All images will be lazy-loaded unless the IMG tag has the class <code>.no-b-lazy</code>.');
  }

}

YOURMODULE.info.yml

name: Lazy Images 
type: module
description: Simple implementation for lazy-loading images.
core: 8.x
dependencies:
  - filter

YOURMODULE.js

/**
 * @file
 * The JavaScript file for calling bLazy script.
 */

(function ($) {
  'use strict';

  // @see http://dinbror.dk/blog/blazy/?ref=example-page#Options
  var options = {
    selector: ".b-lazy",
    src: "data-src",
    offset: 100
  };
  var bLazy = new Blazy(options);

})(jQuery);

YOURMODULE.libraries.yml

default:
  js:
    js/YOURMODULE.js: {}
  dependencies:
    - core/jquery
    - YOURMODULE/default

blazy:
  remote: https://github.com/dinbror/blazy
  version: 1.8.2
  license:
    name: MIT
    url: https://github.com/dinbror/blazy/blob/1.8.2/LICENSE
  js:
    /libraries/blazy/blazy.js: {}

YOURMODULE.module.php

<?php

/**
 * Implements hook_preprocess_image().
 */
function YOURMODULE_preprocess_image(&$variables) {
  // $placeholder_img = drupal_get_path('module', 'YOURMODULE') . '/images/clear.gif';
  $placeholder_img = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';

  $variables['attributes']['data-src'] = $variables['attributes']['src'];
  $variables['attributes']['src'] = $placeholder_img;
  $variables['attributes']['class'][] = 'b-lazy';
}

/**
* Implements hook_page_attachments_alter().
*/
function YOURMODULE_page_attachments_alter(array &$attachments) {
  $attachments['#attached']['library'][] = 'YOURMODULE/default';
}