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.