Skip to content

Commit f0e365c

Browse files
authored
Use scrollMargin for lazy load intersection observer
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.
1 parent ab63afc commit f0e365c

File tree

1 file changed

+7
-6
lines changed

1 file changed

+7
-6
lines changed

source

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7629,14 +7629,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
76297629

76307630
<li>
76317631
<p>The <var>options</var> is an <code>IntersectionObserverInit</code> dictionary with the
7632-
following dictionary members: «[ "<code data-x="">rootMargin</code>" → <span>lazy load root
7632+
following dictionary members: «[ "<code data-x="">scrollMargin</code>" → <span>lazy load scroll
76337633
margin</span> ]»</p>
76347634

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

7638-
<p class="XXX">The <span>lazy load root margin</span> suggestions imply dynamic changes to the
7639-
value, but the <code>IntersectionObserver</code> API does not support changing the root
7638+
<p class="XXX">The <span>lazy load scroll margin</span> suggestions imply dynamic changes to the
7639+
value, but the <code>IntersectionObserver</code> API does not support changing the scroll
76407640
margin. See issue <a
76417641
href="https://github.com/w3c/IntersectionObserver/issues/428">w3c/IntersectionObserver#428</a>.</p>
76427642
</li>
@@ -7678,8 +7678,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
76787678

76797679
<p>
76807680
<!--INSERT TRACKING-->
7681-
The <dfn>lazy load root margin</dfn> is an <span>implementation-defined</span> value, but with
7682-
the following suggestions to consider:</p>
7681+
The <dfn id="lazy-load-root-margin">lazy load scroll margin</dfn> is an
7682+
<span>implementation-defined</span> value, but with the following suggestions to consider:</p>
76837683

76847684
<ul>
76857685
<li><p>Set a minimum value that most often results in the resources being loaded before they
@@ -7697,7 +7697,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
76977697
</ul>
76987698

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

@@ -141466,6 +141466,7 @@ INSERT INTERFACES HERE
141466141466
Tony Ross,
141467141467
Tooru Fujisawa,
141468141468
Toru Kobayashi,
141469+
Traian Captan,
141469141470
Travis Leithead,
141470141471
Trevor Rowbotham,
141471141472
Trevor Saunders,

0 commit comments

Comments
 (0)