JavaScript detection of whether LazyLoad is supported doesn't work |
||||
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) { ... }
,
Dec 11
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) { ... }
,
Jan 10
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?
,
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
,
Jan 14
> 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.
,
Jan 14
,
Jan 15
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 |
||||
Comment 1 by sclit...@chromium.org
, Dec 8