Check intersection of lazy images from "update the rendering"

Fixes #5236.

source

@@ -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>
@@ -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
+  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
+  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>
+    </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>
@@ -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>
@@ -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>