Lazyload images #3752

bengreenstein · 2018-06-08T23:27:22Z

This is a draft of spec changes to support a lazyload attribute in iframe and img elements.

Issue: #2806
Tests: https://chromium-review.googlesource.com/c/chromium/src/+/1417117 (wpt export)

/embedded-content.html ( diff )
/images.html ( diff )
/index.html ( diff )
/indices.html ( diff )
/media.html ( diff )
/rendering.html ( diff )
/urls-and-fetching.html ( diff )

domenic · 2018-06-12T20:33:32Z

I did another minor pass; PTAL.

domenic

Some issues with the metadata fetcher

source

domenic

Metadata fetching looks good to me editorially now. Eager to hear others thoughts on whether it provides the right foundation for interoperability.

Things were fixed

annevk

You also need to update the element indexes to include this attribute for img and iframe.

Should this influence https://fetch.spec.whatwg.org/#concept-request-priority somehow?

source

jakearchibald

Also: img.decode() waits for the image fetch to complete. With lazyload, this may take a long time, or might never happen. Is that the intent? Feels like decode() is a strong signal that the developer wants the image to fetch.

source

jakearchibald · 2018-07-25T15:08:23Z

source

+    <tr>
+     <td><dfn><code data-x="attr-lazyload-auto">auto</code></dfn>
+     <td><dfn data-x="attr-lazyload-auto-state">Auto</dfn>
+     <td>Indicates that the user agent may determine the fetching strategy (the default).


I think there are cases where we need to define 'auto'. Expectations are pretty strong when it comes to new Image(). Perhaps "off" is the default unless the image was created by the regular document parser (not innerHTML and createContextualFragment).

I'm in favor of leaving auto free to experiment for now...

new Audio() sets preload=auto, maybe new Image() could set load=eager to match expectations.

jakearchibald · 2018-07-25T15:16:42Z

source

+
+  <p>A <dfn>lazy loading attribute</dfn> is an <span>enumerated attribute</span>. The following
+  table lists the keywords and states for the attribute &mdash; the keywords in the left column map
+  to the states in the cell in the second column on the same row as the keyword.</p>


What happens if this value is changed after element creation? Eg, if I switch from "on" to "off". Feels like the image should immediately load. Worth spelling out?

This is explicit in the spec's

user agents must obtain images immediately when the CSS boxes those images intersect the viewport, or when the corresponding img element's lazyload attribute is in the Off state

But maybe we can add a clarifying note right after that paragraph, saying "This means that if the author changes the lazyload attribute's value to Off, and the image has not already been obtained, it will immediately be obtained."

This seems like a possibly common use case. Is it clear that changing the state is the way to load the image, or should there be a load() method (like for media elements)?

I just realized that load() would conflict with load IDL attribute...

This CL implements support for the "lazyload" attribute on frames, according to whatwg/html#3752, and as part of the LazyLoad feature. The accepted values are: "on", which causes the browser to lazily load a frame even if it's same-origin or nested inside another lazyloaded frame, "off", which causes the browser to avoid lazily loading this frame or any of it's children (unless those children are marked with lazyload="on"), "auto", which activates the default behavior, and is therefore not explicitly handled in code. Bug: 873358 Change-Id: I2fde65adb15216260291b08e39888a2363f44d4a Reviewed-on: https://chromium-review.googlesource.com/1176293 Commit-Queue: Scott Little <sclittle@chromium.org> Reviewed-by: Kinuko Yasuda <kinuko@chromium.org> Cr-Commit-Position: refs/heads/master@{#583841}

This CL implements support for the "lazyload" attribute on images, according to whatwg/html#3752, and as part of the LazyLoad feature. The accepted values are: "off", which causes the browser to avoid lazily loading the <img> element "on" and "auto", activate the default behavior of lazily load the <img> element When the attribute is changed to "off", the deferred image loads immediately. Bug: 875080 Change-Id: I839926a9827d019f23aafc40f8315476fe1b3048 Reviewed-on: https://chromium-review.googlesource.com/1197782 Reviewed-by: Hiroshige Hayashizaki <hiroshige@chromium.org> Reviewed-by: Takashi Toyoshima <toyoshim@chromium.org> Commit-Queue: rajendrant <rajendrant@chromium.org> Cr-Commit-Position: refs/heads/master@{#592599}

sideshowbarker

I’d suggest that since the change to the CONTRIBUTING.md and README.md files arenn’t directly related to the substance of the rest of this patch (lazyload feature), it’d be preferable for the CONTRIBUTING.md and README.md changes to be in separate patches from this patch. It’d be fine if they are just a separate commits as part of PR #3752 but not sure if that would happen, given that the policy here for PRs is that they result in a single (squashed) commit that gets merged to master

sideshowbarker

The changes to dev/style.css for adding the syntax-highlighter styles have already been merged into master, so they should be dropped from this patch.

sideshowbarker

OK, I’m now realizing that this reason some unrelated changes are showing up in the diff here are that this patch includes some merges? So it seems like it needs to be rebased against master to clear those away?

annevk · 2018-12-11T09:55:28Z

@bengreenstein could you rebase this against master and then force push the resulting changeset to get rid of the merge commits? As it stands it looks like this is proposing a number of changes against dev/styles.css for instance, which doesn't seem correct.

sideshowbarker · 2018-12-14T22:43:10Z

This branch is now in a state that it can’t be rebased against master without multiple merge conflicts.

bengreenstein · 2018-12-14T22:50:32Z

@sideshowbarker and @annevk Sorry about the state of the branch. Hopefully now it is all cleaned up.

domenic

Some stuff to work out around images; I'm most concerned about srcset/picture.

Will look through other reviewers' comments and flag them also.

source

domenic

Small things and one big thing: what to do for srcset and picture.

source

domenic · 2018-12-21T01:20:49Z

OK, sweet! I pushed up a few minor tweaks of my own, almost all editorial. This now looks good to me.

@jakearchibald, I think we addressed your comments, so I will dismiss your review, but if you have the time, a re-review would be much appreciated.

From what I recall, this had pretty active and helpful support from WebKit at least in #2806. @smfr and/or @othermaciej, would you like to take a look at the results, probably using the diff links in the OP to see the rendered additions? From what I can see we haven't yet addressed the WebKit request to have a feature for a placeholder image while it is loading ("lowsrc"), but I think we went through a lot of the other questions in that thread and resolved them; please correct me if I'm wrong.

@bengreenstein, are there web platform tests for this yet?

Comments addressed, I think!

BitPopCoin · 2019-01-11T15:54:13Z

I'd like a call back I can insert into an anchor or something to let me know when a location has been reached.

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: whatwg/html#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}

whatwg/html#3752 landed, so remove comments and tentative extension.

…=testonly Automatic update from web-platform-tests Remove tentative from lazy load tests (#21773) whatwg/html#3752 landed, so remove comments and tentative extension. -- wpt-commits: 283eaa796815403a3e959861f6f1e61b0d35848f wpt-pr: 21773 --HG-- rename : testing/web-platform/tests/loading/lazyload/common.js => testing/web-platform/tests/html/semantics/embedded-content/the-img-element/common.js rename : testing/web-platform/tests/loading/lazyload/disconnected-image-loading-lazy.tentative.html => testing/web-platform/tests/html/semantics/embedded-content/the-img-element/disconnected-image-loading-lazy.html rename : testing/web-platform/tests/loading/lazyload/resources/image-loading-lazy-below-viewport-iframe.html => testing/web-platform/tests/html/semantics/embedded-content/the-img-element/resources/image-loading-lazy-below-viewport-iframe.html rename : testing/web-platform/tests/loading/lazyload/resources/image-loading-lazy-in-viewport-iframe.html => testing/web-platform/tests/html/semantics/embedded-content/the-img-element/resources/image-loading-lazy-in-viewport-iframe.html rename : testing/web-platform/tests/loading/lazyload/resources/image.png => testing/web-platform/tests/html/semantics/embedded-content/the-img-element/resources/image.png rename : testing/web-platform/tests/loading/lazyload/resources/newwindow.html => testing/web-platform/tests/html/semantics/embedded-content/the-img-element/resources/newwindow.html rename : testing/web-platform/tests/loading/lazyload/resources/referrer-checker-img.py => testing/web-platform/tests/html/semantics/embedded-content/the-img-element/resources/referrer-checker-img.py rename : testing/web-platform/tests/loading/lazyload/resources/subframe.html => testing/web-platform/tests/html/semantics/embedded-content/the-img-element/resources/subframe.html

…=testonly Automatic update from web-platform-tests Remove tentative from lazy load tests (#21773) whatwg/html#3752 landed, so remove comments and tentative extension. -- wpt-commits: 283eaa796815403a3e959861f6f1e61b0d35848f wpt-pr: 21773

…=testonly Automatic update from web-platform-tests Remove tentative from lazy load tests (#21773) whatwg/html#3752 landed, so remove comments and tentative extension. -- wpt-commits: 283eaa796815403a3e959861f6f1e61b0d35848f wpt-pr: 21773 UltraBlame original commit: e201cb3f54180dcb5ea5203f472035bca7a1da14

vertzjdean

i dont know what is going on but im not going to pay for this

domenic added addition/proposal New features or enhancements topic: img labels Jun 12, 2018

domenic mentioned this pull request Jun 12, 2018

Preventing downloading images or objects until they are visible in the viewport #2806

Closed

domenic previously requested changes Jun 27, 2018

View reviewed changes

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

domenic reviewed Jun 28, 2018

View reviewed changes

annevk reviewed Jul 25, 2018

View reviewed changes

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

jakearchibald self-requested a review July 25, 2018 14:42

jakearchibald previously requested changes Jul 25, 2018

View reviewed changes

Malvoz mentioned this pull request Aug 8, 2018

Demo has issues Maps4HTML/MapML.js#79

Closed

Malvoz mentioned this pull request Sep 25, 2018

Allow loading attribute for <img> validator/validator#699

Closed

sideshowbarker reviewed Sep 26, 2018

View reviewed changes

bengreenstein force-pushed the lazyloading branch from d2af159 to da6a6f8 Compare October 2, 2018 16:25

bengreenstein force-pushed the lazyloading branch from b2cdf21 to c093e8c Compare December 14, 2018 22:46

domenic requested changes Dec 18, 2018

View reviewed changes

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

domenic requested changes Dec 20, 2018

View reviewed changes

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

domenic added the needs tests Moving the issue forward requires someone to write tests label Dec 21, 2018

domenic approved these changes Dec 21, 2018

View reviewed changes

rwlbuis added a commit to web-platform-tests/wpt that referenced this pull request Feb 13, 2020

Remove tentative from lazy load tests

4d7197d

whatwg/html#3752 landed, so remove comments and tentative extension.

rwlbuis mentioned this pull request Feb 13, 2020

Remove tentative from lazy load tests web-platform-tests/wpt#21773

Merged

rwlbuis added a commit to web-platform-tests/wpt that referenced this pull request Feb 13, 2020

Remove tentative from lazy load tests

9bdd6e1

whatwg/html#3752 landed, so remove comments and tentative extension.

rwlbuis added a commit to web-platform-tests/wpt that referenced this pull request Feb 13, 2020

Remove tentative from lazy load tests

44b54aa

whatwg/html#3752 landed, so remove comments and tentative extension.

rwlbuis added a commit to web-platform-tests/wpt that referenced this pull request Feb 13, 2020

Remove tentative from lazy load tests (#21773)

283eaa7

whatwg/html#3752 landed, so remove comments and tentative extension.

ayugioh2003 mentioned this pull request Feb 13, 2020

Lazyload images <img loading=lazy> ayugioh2003/today-i-learned#182

Open

Malvoz mentioned this pull request Feb 13, 2020

The note in the example for loading content attribute seems incorrect #5290

Closed

jonathanhefner mentioned this pull request Feb 13, 2020

Add config.action_view.image_loading rails/rails#38452

Merged

2 tasks

WilliamC07 mentioned this pull request Feb 18, 2020

Use lazy loading StuyCSDojo/StuyCSDojo.github.io#11

Open

sideshowbarker mentioned this pull request Feb 26, 2020

Lazy loading mdn/browser-compat-data#5751

Closed

gwern mentioned this pull request Mar 19, 2020

HTML5 feature: lazy loading images jgm/pandoc#6197

Open

domfarolino mentioned this pull request Apr 2, 2020

Cancel old invocations after lazy load resumption #5433

Closed

zcorpan mentioned this pull request Apr 6, 2020

Help the HTML standard with the approach for when to load lazy images aFarkas/lazysizes#769

Closed

zcorpan mentioned this pull request Apr 29, 2020

Specify <iframe loading=lazy> #5496

Closed

JoyceBabu mentioned this pull request Oct 24, 2020

<img> proprietary attribute "loading" htacg/tidy-html5#879

Closed

ehsan-karamad mentioned this pull request Dec 1, 2020

Feature Policy: lazyload WICG/document-policy#6

Open

Malvoz mentioned this pull request Dec 10, 2020

Tabs: Lazyload openui/open-ui#238

Closed

summercms mentioned this pull request Dec 10, 2020

Natively lazyload certain web components like tabs etc. #6208

Closed

grakz mentioned this pull request Apr 13, 2021

Lazy loaded images and iframes should be forced to eager when printing #6581

Closed

github-actions bot mentioned this pull request Apr 19, 2021

fix(attributes): link to datetime mdn/content#4261

Closed

github-actions bot mentioned this pull request Apr 27, 2021

Remove all obsolete macros and all obs/depr version mdn/content#4509

Merged

foolip mentioned this pull request May 6, 2021

Lazy loading video element poster attribute #6636

Open

rniwa mentioned this pull request May 10, 2021

Custom Elements: deferred upgrade until displayable #6480

Open

justincorrigible mentioned this pull request May 20, 2021

fix "loading" being passed as html props to div error icgc-argo/platform-ui#1944

Merged

13 tasks

vertzjdean reviewed Jan 9, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lazyload images #3752

Lazyload images #3752

bengreenstein commented Jun 8, 2018 •

edited by pr-preview bot

Loading

domenic commented Jun 12, 2018

domenic left a comment

domenic left a comment

annevk left a comment

jakearchibald left a comment

jakearchibald Jul 25, 2018

domenic Dec 18, 2018

zcorpan Mar 6, 2019

jakearchibald Jul 25, 2018

domenic Dec 18, 2018

zcorpan Mar 6, 2019

zcorpan Mar 6, 2019

sideshowbarker left a comment •

edited

Loading

sideshowbarker left a comment

sideshowbarker left a comment

annevk commented Dec 11, 2018

sideshowbarker commented Dec 14, 2018

bengreenstein commented Dec 14, 2018

domenic left a comment

domenic left a comment

domenic commented Dec 21, 2018

BitPopCoin commented Jan 11, 2019

vertzjdean left a comment

Lazyload images #3752

Lazyload images #3752

Conversation

bengreenstein commented Jun 8, 2018 • edited by pr-preview bot Loading

domenic commented Jun 12, 2018

domenic left a comment

Choose a reason for hiding this comment

domenic left a comment

Choose a reason for hiding this comment

annevk left a comment

Choose a reason for hiding this comment

jakearchibald left a comment

Choose a reason for hiding this comment

jakearchibald Jul 25, 2018

Choose a reason for hiding this comment

domenic Dec 18, 2018

Choose a reason for hiding this comment

zcorpan Mar 6, 2019

Choose a reason for hiding this comment

jakearchibald Jul 25, 2018

Choose a reason for hiding this comment

domenic Dec 18, 2018

Choose a reason for hiding this comment

zcorpan Mar 6, 2019

Choose a reason for hiding this comment

zcorpan Mar 6, 2019

Choose a reason for hiding this comment

sideshowbarker left a comment • edited Loading

Choose a reason for hiding this comment

sideshowbarker left a comment

Choose a reason for hiding this comment

sideshowbarker left a comment

Choose a reason for hiding this comment

annevk commented Dec 11, 2018

sideshowbarker commented Dec 14, 2018

bengreenstein commented Dec 14, 2018

domenic left a comment

Choose a reason for hiding this comment

domenic left a comment

Choose a reason for hiding this comment

domenic commented Dec 21, 2018

BitPopCoin commented Jan 11, 2019

vertzjdean left a comment

Choose a reason for hiding this comment

bengreenstein commented Jun 8, 2018 •

edited by pr-preview bot

Loading

sideshowbarker left a comment •

edited

Loading