Problem/Motivation

The new <img loading="lazy"> HTML attribute aims to standardize a way for browsers to support lazy (or eager) image loading. Historically the technique has seen widespread use, via a wide range of JS libraries.

It would be good to support this in Drupal content, by allowing site builders and content editors to specify which images can be lazy-loaded.

Support for the loading attribute:

  • Explainer document: https://github.com/scott-little/lazyload
  • Can I Use: loading
  • Firefox, Edge, Chrome, Opera have support on desktop, and Chrome on Android.
  • Safari (mac + iOS) is the main browser yet to implement it.
  • MSIE and Edge <= 18 will presumably never get native support at this stage.

Note: the loading attribute also applies to the iframe element. We might look for an approach with that too.

Proposed resolution

  • Provide a setting to the Image field formatter, to let site builders specify the value of the loading attribute (lazy|eager|auto), or omit the attribute.
  • Update the image theme hook if necessary.
  • Provide a setting for images in CKEditor to use the loading attribute.
  • Consider whether to bundle a polyfill.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#6 add-ui-for-ckeditor-loading-html-attributes-to-images-3126323.patch2.21 KBlinhnm

Comments

andrewmacpherson created an issue. See original summary.

plach’s picture

plach
he/him
Primary language Italian
Location Venezia
commented
Version: 9.0.x-dev » 9.1.x-dev

Feature requests should target 9.1.x now.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

heddn’s picture

heddn
Primary language English
Location Nicaragua
commented
Related issues: +#3167034: Leverage the 'loading' html attribute to enable lazy-load by default for images in Drupal core

There's mention of making lazy load work for iframes too in the IS. This issue could easily be repurposed for that, or closed duplicate. As image support is already in #3167034: Leverage the 'loading' html attribute to enable lazy-load by default for images in Drupal core. And field widget support is in #3173180: Add UI for 'loading' html attribute to images.

There was also mention of ckeditor, but I'm not sure where or if support for that is needed.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

linhnm’s picture

linhnm commented
StatusFileSize
new add-ui-for-ckeditor-loading-html-attributes-to-images-3126323.patch2.21 KB

I created the patch provide a setting for images in CKEditor to use the loading attribute.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

cilefen’s picture

cilefen commented

Is this issue out of date and should be closed?

heddn’s picture

heddn
Primary language English
Location Nicaragua
commented
Status: Active » Closed (outdated)

Yes, it should be closed. As of 9.2, lazy loading is supported in Drupal core and new features in this space have been added since then to disable it via a UI and work is ongoing for picture/responsive image support as well.