Lazyload images #3752
Lazyload images #3752
Conversation
|
I did another minor pass; PTAL. |
There was a problem hiding this comment.
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
Outdated
| <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). |
There was a problem hiding this comment.
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).
There was a problem hiding this comment.
I'm in favor of leaving auto free to experiment for now...
There was a problem hiding this comment.
new Audio() sets preload=auto, maybe new Image() could set load=eager to match expectations.
|
|
||
| <p>A <dfn>lazy loading attribute</dfn> is an <span>enumerated attribute</span>. The following | ||
| table lists the keywords and states for the attribute — 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> |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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."
There was a problem hiding this comment.
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)?
There was a problem hiding this comment.
I just realized that load() would conflict with load IDL attribute...
There was a problem hiding this comment.
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
bengreenstein
force-pushed
the
lazyloading
branch
from
d2af159 to
da6a6f8
Compare
|
@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 |
|
This branch is now in a state that it can’t be rebased against master without multiple merge conflicts. |
bengreenstein
force-pushed
the
lazyloading
branch
from
b2cdf21 to
c093e8c
Compare
|
@sideshowbarker and @annevk Sorry about the state of the branch. Hopefully now it is all cleaned up. |
|
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? |
domenic
added
the
needs tests
|
I'd like a call back I can insert into an anchor or something to let me know when a location has been reached. |
@domenic
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 )