Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Suggest a rootMargin strategy for lazy-loaded elements #5917

Merged
merged 3 commits into from
Oct 22, 2020
Merged

Suggest a rootMargin strategy for lazy-loaded elements #5917

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cc82772
Suggest a rootMargin strategy for lazy-loaded elements
zcorpan Sep 15, 2020
6684236
Replace the 1250px minimum with a goal-based minimum
zcorpan Sep 18, 2020
6e8abfe
images -> resources
zcorpan Sep 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 31 additions & 5 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6980,14 +6980,16 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute

<li>
<p>The <var>options</var> is an <code>IntersectionObserverInit</code> dictionary with the
following dictionary members: «[ "<code data-x="">rootMargin</code>" → an
<span>implementation-defined</span> value ]»</p>

<p class="XXX">See <a
href="https://github.com/whatwg/html/issues/5408">issue #5408</a>.</p>
following dictionary members: «[ "<code data-x="">rootMargin</code>" → <span>lazy load root
margin</span> ]»</p>

<p class="note">This allows for fetching the image during scrolling, when it does not yet —
but is about to — intersect the viewport.</p>

<p class="XXX">The <span>lazy load root margin</span> suggestions imply dynamic changes to the
value, but the <code>IntersectionObserver</code> API does not support changing the root
margin. See issue <a
href="https://github.com/w3c/IntersectionObserver/issues/428">w3c/IntersectionObserver#428</a>.</p>
</li>
</ul>
</li>
Expand Down Expand Up @@ -7025,6 +7027,30 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
</li>
</ol>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the rationale behind the value 1250px?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's the smallest value that Chromium uses. They experimented with 750px but found it was too low. See #5408 (comment)

We could specify a different value, or not suggest any particular value. However, what I'd like to avoid is having some browsers use a very small value (like 1px or 50px) which makes the feature annoying for users and causes web developers to avoid using native lazy loading.

Copy link
Member Author

@zcorpan zcorpan Sep 18, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe this could be goal-based instead, like saying there should be a minimum value that most often results in images being loaded before they intersect the viewport under normal usage patterns for the given device. This could be quite different for a watch compared to a smartphone, for example (because smaller screen and maybe slower scrolling).

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, I was thinking this should be carefully worded as we can have many different form factors (watch is a good "extreme" case).

Copy link
Member Author

@zcorpan zcorpan Sep 18, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, please see 88384f6 & a9f9c1d


<p>
<!--INSERT TRACKING-->
The <dfn>lazy load root margin</dfn> is an <span>implementation-defined</span> value, but with
the following suggestions to consider:</p>

<ul>
<li><p>Set a minimum value that most often results in the resources being loaded before they
intersect the viewport under normal usage patterns for the given device.</p></li>

<li><p>The typical scrolling speed: increase the value for devices with faster typical scrolling
speeds.</p></li>

<li><p>The current scrolling speed or momentum: the UA can attempt to predict where the scrolling
will likely stop, and adjust the value accordingly.</p></li>

<li><p>The network quality: increase the value for slow or high-latency connections.</p></li>

<li><p>User preferences can influence the value.</p></li>
</ul>

<p class="note">It is important <span class="no-backref" data-x="tracking vector">for
privacy</span> that the <span>lazy load root margin</span> not leak additional information. For
example, the typical scrolling speed on the current device could be imprecise so as to not
introduce a new fingerprinting vector.</p>

<h3 split-filename="common-dom-interfaces">Common DOM interfaces</h3>

Expand Down