Skip to content

Commit

Permalink
Use scrollMargin for lazy load intersection observer
Browse files Browse the repository at this point in the history
Currently the lazy load intersection observer is set up using a rootMargin.
This does not work well for pages that use images in CSS scrollers, like
carousels, causing the images to load too late, when they become visible
and the intersection with the root is detected. To work around this issue
some developers are choosing to not use lazy loading, thus increasing the
overall bandwidth usage for their sites.

Using scrollMargin for the lazy load intersection observer will allow lazy
loading images to load when they are near the viewport as expected.
  • Loading branch information
tcaptan-cr authored Nov 16, 2023
1 parent ab63afc commit f0e365c
Showing 1 changed file with 7 additions and 6 deletions.
13 changes: 7 additions & 6 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -7629,14 +7629,14 @@ 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>" → <span>lazy load root
following dictionary members: «[ "<code data-x="">scrollMargin</code>" → <span>lazy load scroll
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
<p class="XXX">The <span>lazy load scroll margin</span> suggestions imply dynamic changes to the
value, but the <code>IntersectionObserver</code> API does not support changing the scroll
margin. See issue <a
href="https://github.com/w3c/IntersectionObserver/issues/428">w3c/IntersectionObserver#428</a>.</p>
</li>
Expand Down Expand Up @@ -7678,8 +7678,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute

<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>
The <dfn id="lazy-load-root-margin">lazy load scroll 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
Expand All @@ -7697,7 +7697,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
</ul>

<p class="note">It is important <span data-x="tracking vector">for privacy</span> that the
<span>lazy load root margin</span> not leak additional information. For example, the typical
<span>lazy load scroll 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>

Expand Down Expand Up @@ -141466,6 +141466,7 @@ INSERT INTERFACES HERE
Tony Ross,
Tooru Fujisawa,
Toru Kobayashi,
Traian Captan,
Travis Leithead,
Trevor Rowbotham,
Trevor Saunders,
Expand Down

0 comments on commit f0e365c

Please sign in to comment.