Missing feature detection for native lazy loading?

Created on 13 June 2022, over 2 years ago
Updated 21 September 2022, over 2 years ago

Problem/Motivation

When the "Prefer native lazy-loading" box is checked, the "loading" attribute is properly used; however, it has come to my attention that if we're on a browser that does not have native lazy loading available (e.g. Firefox < 75/Chrome < 77/IE <= 11, see https://caniuse.com/loading-lazy-attr), there is no feature detection in use to instead use the JavaScript-based approach. Correct me if I'm wrong, but the prefer native option seems to not necessarily prefer native, but actually insists upon it -- breaking lazy loading for browsers that do not support it natively.

Should we not be doing a more accurate feature detection for the current browser in order to determine if the user's browser supports lazy load, then adjust rendering accordingly? Since this is all happening server-side perhaps this is not possible?

Steps to reproduce

  1. Configure a site to use the Lazy-Load module.
  2. Ensure that the "Prefer native lazy-loading" option is checked.
  3. Navigate to the site using a web browser that does not support native lazy-loading (i.e via a service such as Browserstack), and confirm that image are not lazy loaded, because the markup is not adjust from the native lazy-loading approach.

Proposed resolution

Add more accurate feature detection when selecting the prefer native option. If the browser is determined to support native lazy loading, use the loading="lazy" attribute, otherwise adjust the markup to leverage the lazysizes JS.

✨ Feature request
Status

Needs work

Version

3.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States afireintheattic

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024