Skip to content

Check intersection of lazy images from "update the rendering" #5510

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

Merged
merged 14 commits into from
May 19, 2020
Merged

Check intersection of lazy images from "update the rendering" #5510

Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
c0a7bb5
Check intersection of lazy images from "update the rendering"
zcorpan May 5, 2020
40a543c
Use IntersectionObserver directly. Move lazy load processing out of u…
zcorpan May 7, 2020
f99f55c
have -> has
zcorpan May 7, 2020
1bf7310
Move note about in parallel back to updating the image data
zcorpan May 7, 2020
2b09bf0
Address reviews
domfarolino May 13, 2020
ae8a917
Address annevk review
domfarolino May 15, 2020
a2d3982
Add more disclaimers around IO spec
domfarolino May 15, 2020
01b8c3c
Use <hr> instead of subsection
zcorpan May 18, 2020
14c1637
Rename will lazy load image steps to will lazy load element steps
zcorpan May 18, 2020
dfdcec6
Linebreak
zcorpan May 18, 2020
f776326
Remove word 'flag'; formatting
zcorpan May 18, 2020
c432c9d
Add 'XXX' annotation; replace <dl> with ordered map syntax
zcorpan May 18, 2020
581c240
Remove 'whatwg/html' in issue link text
zcorpan May 18, 2020
8a764c7
Wording tweak: but is about to
zcorpan May 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
170 changes: 141 additions & 29 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3746,6 +3746,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute

<ul class="brief">
<li><dfn data-x-href="https://w3c.github.io/IntersectionObserver/#run-the-update-intersection-observations-steps">run the update intersection observations steps</dfn></li>
<li><dfn data-x-href="https://w3c.github.io/IntersectionObserver/#intersectionobserver"><code>IntersectionObserver</code></dfn></li>
<li><dfn data-x-href="https://w3c.github.io/IntersectionObserver/#dictdef-intersectionobserverinit"><code>IntersectionObserverInit</code></dfn></li>
<li><dfn data-x-href="https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-observe" data-x="dom-IntersectionObserver-observe"><code>observe</code></dfn></li>
<li><dfn data-x-href="https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-unobserve" data-x="dom-IntersectionObserver-unobserve"><code>unobserve</code></dfn></li>
<li><dfn data-x-href="https://w3c.github.io/IntersectionObserver/#dom-intersectionobserverentry-isintersecting" data-x="dom-IntersectionObserverEntry-isIntersecting"><code>isIntersecting</code></dfn></li>
<li><dfn data-x-href="https://w3c.github.io/IntersectionObserver/#dom-intersectionobserverentry-target" data-x="dom-IntersectionObserverEntry-target"><code>target</code></dfn></li>
</ul>
</dd>

Expand Down Expand Up @@ -6906,6 +6912,132 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
data-x="invalid value default">invalid value default</i> are both the <span
data-x="attr-loading-eager-state">Eager</span> state.</p>

<hr>

<p>The <dfn>will lazy load element steps</dfn>, given an element <var>element</var>,
are as follows:</p>

<ol>
<li>
<p>If <span data-x="concept-n-noscript">scripting is disabled</span> for <var>element</var>,
then return false.</p>

<p class="note">This is an anti-tracking measure, because if a user agent supported lazy loading
when scripting is disabled, it would still be possible for a site to track a user's approximate
scroll position throughout a session, by strategically placing images in a page's markup such
that a server can track how many images are requested and when.</p>
</li>

<li><p>If <var>element</var>'s <span>lazy loading attribute</span> is in the <span
data-x="attr-loading-lazy-state">Lazy</span> state, then return true.</p></li>

<li><p>Return false.</p></li>
</ol>

<p>Each <code>img</code> element has an associated <dfn>ready to be lazy loaded</dfn> boolean,
initially false.</p>

<p class="note">For <code>img</code> elements that <span data-x="will lazy load element
steps">will lazy load</span>, this can be set to true in the <span>lazy load intersection
observer</span>'s callback, which causes the image to load by continuing the <span>update the
image data</span> steps.</p>

<p>Each <code>Document</code> has a <dfn>lazy load intersection observer</dfn>, initially set to
null but can be set to an <code>IntersectionObserver</code> instance.</p>

<p>To <dfn>start intersection-observing a lazy loading element</dfn> <var>element</var>, run these
steps:</p>

<ol>
<li><p>Let <var>doc</var> be <var>element</var>'s <span>node document</span>.</p></li>

<li>
<p>If <var>doc</var>'s <span>lazy load intersection observer</span> is null, set it to a new
<code>IntersectionObserver</code> instance, initialized as follows:</p>

<p class="XXX">The intention is to use the original value of the
<code>IntersectionObserver</code> constructor. However, we're forced to use the
JavaScript-exposed constructor in this specification, until <cite>Intersection Observer</cite>
exposes low-level hooks for use in specifications. See bug <a
href="https://github.com/w3c/IntersectionObserver/issues/427">w3c/IntersectionObserver#427</a>
which tracks this. <ref spec="INTERSECTIONOBSERVER"></p>

<ul>
<li>
<p>The <var>callback</var> is these steps, with arguments <var>entries</var> and
<var>observer</var>:</p>

<ol>
<li>
<p>For each <var>entry</var> in <var>entries</var> <span class="XXX">using a method of
iteration which does not trigger developer-modifiable array accessors or
iteration hooks</span>:

<ol>
<li>
<p>If <var>entry</var>.<code
data-x="dom-IntersectionObserverEntry-isIntersecting">isIntersecting</code> is true, set
<var>entry</var>.<code data-x="dom-IntersectionObserverEntry-target">target</code>'s
<span>ready to be lazy loaded</span> boolean to true.</p>

<p class="XXX">The intention is to use the original value of the
<code data-x="dom-IntersectionObserverEntry-isIntersecting">isIntersecting</code> and
<code data-x="dom-IntersectionObserverEntry-target">target</code> getters. See <a
href="https://github.com/w3c/IntersectionObserver/issues/427">w3c/IntersectionObserver#427</a>.
<ref spec="INTERSECTIONOBSERVER"></p>
</li>
</ol>
</li>
</ol>
</li>

<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>

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

<li>
<p>Call <var>doc</var>'s <span>lazy load intersection observer</span>'s <code
data-x="dom-IntersectionObserver-observe">observe</code> method with <var>element</var> as the
argument.</p>

<p class="XXX">The intention is to use the original value of the <code
data-x="dom-IntersectionObserver-observe">observe</code> method. See <a
href="https://github.com/w3c/IntersectionObserver/issues/427">w3c/IntersectionObserver#427</a>.
<ref spec="INTERSECTIONOBSERVER"></p>
</li>
</ol>

<p>To <dfn>stop intersection-observing a lazy loading element</dfn> <var>element</var>, run these
steps:</p>

<ol>
<li><p>Let <var>doc</var> be <var>element</var>'s <span>node document</span>.</p></li>

<li><p>Assert: <var>doc</var>'s <span>lazy load intersection observer</span> is not
null.</p></li>

<li>
<p>Call <var>doc</var>'s <span>lazy load intersection observer</span> <code
data-x="dom-IntersectionObserver-unobserve">unobserve</code> method with <var>element</var> as
the argument.</p>

<p class="XXX">The intention is to use the original value of the <code
data-x="dom-IntersectionObserver-unobserve">unobserve</code> method. See <a
href="https://github.com/w3c/IntersectionObserver/issues/427">w3c/IntersectionObserver#427</a>.
<ref spec="INTERSECTIONOBSERVER"></p>
</li>
</ol>


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

Expand Down Expand Up @@ -27440,33 +27572,6 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code

<h6>Updating the image data</h6>

<p>The <dfn>will lazy load image steps</dfn>, given an <code>img</code> element <var>img</var>,
are as follows:</p>

<ol>
<li>
<p>If <span data-x="concept-n-noscript">scripting is disabled</span> for <var>img</var>, return
false.</p>

<p class="note">This is an anti-tracking measure, because if a user agent supported lazy loading
when scripting is disabled, it would still be possible for a site to track a user's approximate
scroll position throughout a session, by strategically placing images in a page's markup such
that a server can track how many images are requested and when.</p>
</li>

<li>
<p>If <var>img</var>'s <span>lazy loading attribute</span> is in the <span
data-x="attr-loading-lazy-state">Lazy</span> state, <var>img</var> does not <span>intersect the
viewport</span>, and <var>img</var> is not about to <span>intersect the viewport</span>, then
return true.</p>

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

<li><p>Return false.</p></li>
</ol>

<p class="note">This algorithm cannot be called from steps running <span>in parallel</span>. If
a user agent needs to call this algorithm from steps running <span>in parallel</span>, it needs to
<span data-x="queue a task">queue</span> a task to do so.</p>
Expand Down Expand Up @@ -27688,15 +27793,22 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
false otherwise.</p></li>

<li>
<p>If the <span>will lazy load image steps</span> given the <code>img</code> return true,
<p>If the <span>will lazy load element steps</span> given the <code>img</code> return true,
then:</p>

<ol>
<li><p><span>Start intersection-observing a lazy loading element</span> for the
<code>img</code> element.</p></li>

<li><p>Continue running this algorithm <span>in parallel</span>.</p></li>

<li><p>Wait until the <span>will lazy load image steps</span> no longer return true, given the
<li><p>Wait until the <code>img</code>'s <span>ready to be lazy loaded</span> flag is
true, or until the <span>will lazy load element steps</span> no longer return true, given the
<code>img</code>.</p></li>

<li><p><span>Stop intersection-observing a lazy loading element</span> for the <code>img</code>
element.</p></li>

<li><p><span>Queue an element task</span> on the <span>DOM manipulation task source</span>
given the <code>img</code> element to continue running the rest of this algorithm.</p></li>
</ol>
Expand Down