New issue
Advanced search Search tips

Issue 913162 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Jan 14
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Android
Pri: 1
Type: Bug

Blocking:
issue 709494



Sign in to add a comment

JavaScript detection of whether LazyLoad is supported doesn't work

Project Member Reported by sclit...@chromium.org, Dec 8

Issue description

Currently, it looks like the common method of feature detection via JavaScript doesn't work for LazyLoad, e.g.:

var img = document.createElement('img');
if ('lazyLoad' in img) { ... }
 
Labels: -Pri-3 M-72 OS-Android Pri-1
I think adding the proper entries for the "lazyLoad" attribute into https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/html/html_iframe_element.idl and https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/html/html_image_element.idl will likely solve this.
I have a CL in progress that adds this functionality (https://chromium-review.googlesource.com/c/chromium/src/+/1372534), and I've tested that it makes it possible to detect if native lazy loading is supported by the browser from JavaScript, e.g.

if (!!document.createElement("img").lazyLoad) { ... }

Comment 3 Deleted

Cc: addyo@chromium.org
With that CL in place (and Ben's updates to the spec), we'll be able to inform developers they can use a pattern like...

if (!!document.createElement("img").lazyLoad) {
   // conditionally load JS lazy-loading library (like lazysizes)
   // initiate library...
}

to enable cross-browser lazy-loading. At some point in the future, it would be great to explore if we also want to expose `lazyload` as part of Client Hints to avoid having to rely on these checks during runtime.

Is that something we've considered?
Project Member

Comment 5 by bugdroid1@chromium.org, Jan 11

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/f895f1db26876f270f409591aa1fd554ec136c38

commit f895f1db26876f270f409591aa1fd554ec136c38
Author: Scott Little <sclittle@chromium.org>
Date: Fri Jan 11 23:15:28 2019

Add missing idl attribute entries for lazyLoad attribute.

In previous CLs, support for the lazyLoad attribute was added, but the
corresponding idl attribute entries were mistakely forgotten. This CL
adds those attribute entries, making it possible to detect if the
browser supports native lazy loading from JavaScript.

Spec: https://github.com/whatwg/html/pull/3752
ChromeStatus entry: https://www.chromestatus.com/feature/5645767347798016
Intent to implement: https://groups.google.com/a/chromium.org/d/msg/blink-dev/czmmZUd4Vww/1-H6j-zdAwAJ

Bug:  913162 
Change-Id: Ib801c376ac70bf14eb2779e1642409f9cf03a95d
Reviewed-on: https://chromium-review.googlesource.com/c/1372534
Commit-Queue: Scott Little <sclittle@chromium.org>
Reviewed-by: Daniel Cheng <dcheng@chromium.org>
Cr-Commit-Position: refs/heads/master@{#622203}
[modify] https://crrev.com/f895f1db26876f270f409591aa1fd554ec136c38/third_party/blink/renderer/core/html/html_iframe_element.idl
[modify] https://crrev.com/f895f1db26876f270f409591aa1fd554ec136c38/third_party/blink/renderer/core/html/html_image_element.idl

Cc: yoavweiss@chromium.org
> At some point in the future, it would be great to explore if we also want to expose `lazyload` as part of Client Hints to avoid having to rely on these checks during runtime.


Addy, my understanding is that client hints have typically used to convey attributes whose values may change across devices, and whose values can't be indirectly obtained from the user-agent (e.g., network speed, DPR, RAM memory size, save-data etc.).

Using client hints to determine capabilities of browser seems like an interesting direction. There are probably hundreds of browser capabilities that developers probably detect using UA string. Admittedly, that's a bad practice, but is there something specific to LazyLoad?

+yoav because client hints.
Status: Fixed (was: Started)
Regarding Client Hints or other content negotiation mechanism, I just talked to bengr@ about that yesterday. I think it's required if we want developers or services to apply image lazy loading conditionally, as a JS feature detection mechanism is probably too late for that.

Sign in to add a comment