Skip to content

Commit

Permalink
Suggest a rootMargin strategy for lazy-loaded elements
Browse files Browse the repository at this point in the history
  • Loading branch information
zcorpan committed Sep 21, 2020
1 parent cc2ba62 commit 0177524
Showing 1 changed file with 30 additions and 5 deletions.
35 changes: 30 additions & 5 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -6981,14 +6981,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 @@ -7026,6 +7028,29 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
</li>
</ol>

<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>The value is greater than or equal to 1250px.</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

0 comments on commit 0177524

Please sign in to comment.