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

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

Merged
merged 14 commits into from
May 19, 2020
Merged

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

Changes from 1 commit
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
60 changes: 53 additions & 7 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27456,12 +27456,7 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code

<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>
data-x="attr-loading-lazy-state">Lazy</span> state, then return true.</p>
</li>

<li><p>Return false.</p></li>
Expand All @@ -27471,6 +27466,45 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
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>

<p>Each <code>img</code> element have a boolean flag <dfn>ready to be lazy loaded</dfn>, initially
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
false.</p>

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

<p>Each <code>Document</code> has a <span>list</span> of <dfn>list of lazy loading images that
need intersection observation</dfn>, initially empty.</p>

<p class="note">This list is added to in the <span>update the image data</span> steps, and checked
in the <span>run the lazy load intersection steps</span>, which is called from the <span>update
the rendering</span> steps.</p>

<p>The <dfn>run the lazy load intersection steps</dfn> steps for a <code>Document</code> are as
domfarolino marked this conversation as resolved.
Show resolved Hide resolved
follows:</p>

<ol>
<li>
<p><span data-x="list iterate">For each</span> <var>img</var> in the <code>Document</code>'s
<span>list of lazy loading images that need intersection observation</span>:</p>

<ol>
<li>
<p>If <var>img</var> <span data-x="intersect the viewport">intersects the
viewport</span>, or <var>img</var> is about to <span>intersect the viewport</span>, then set
<var>img</var>'s <span>ready to be lazy loaded</span> flag to 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>Otherwise, <span class="XXX">observe <var>img</var> for intersection</span>.</p></li>
domfarolino marked this conversation as resolved.
Show resolved Hide resolved
</ol>
</li>

<li><p><span data-x="list empty">Empty</span> the <span>list of lazy loading images
that need intersection observation</span>.</p></li>
</ol>

<p>When the user agent is to <dfn>update the image data</dfn> of an <code>img</code> element,
optionally with the <i>restart animations</i> flag set,
it must run the following steps:</p>
Expand Down Expand Up @@ -27692,11 +27726,19 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
then:</p>

<ol>
<li><p>Add the <code>img</code> element to its <span>node document</span>'s <span>list of
lazy loading images that need intersection observation</span>, if it isn't already
present.</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 image steps</span> no longer return true, given the
<code>img</code>.</p></li>

<li><p>Remove the <code>img</code> element from its <span>node document</span>'s <span>list of
lazy loading images that need intersection observation</span>, if it is present.</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 Expand Up @@ -89317,6 +89359,10 @@ dictionary <dfn>PromiseRejectionEventInit</dfn> : <span>EventInit</span> {
the animation frame callbacks</span> for that <code>Document</code>, passing in <var>now</var>
as the timestamp.</p></li>

<li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>, <span>run
the lazy load intersection steps</span> for that <code>Document</code>, passing in
<var>now</var> as the timestamp.</p></li>

<li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>, <span>run
the update intersection observations steps</span> for that <code>Document</code>, passing in
<var>now</var> as the timestamp. <ref spec="INTERSECTIONOBSERVER"></p></li>
Expand Down