Report image loading to Resource Timing

whatwg · Jan 21, 2022 · 602b2b7 · 602b2b7
1 parent 4b56588
commit 602b2b7
Showing 1 changed file with 39 additions and 22 deletions.
diff --git a/source b/source
@@ -28820,10 +28820,12 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
 
    <li>
     <!--FETCH-->
-    <p><i>Fetch the image</i>: <span data-x="concept-fetch">Fetch</span> <var>request</var>. Let
-    this instance of the <span data-x="concept-fetch">fetching</span> algorithm be associated with
-    <var>image request</var>.
-    <!-- TODO "Interaction with the Preload Scanner" from the picture spec --></p>
+    <p><i>Fetch the image</i>: <span data-x="concept-fetch">Fetch</span> <var>request</var>. Return
+    from this algorithm, and run the remaining steps as part of the fetch's <i data-x="process
+    response">processResponse</i> for the <span data-x="concept-response">response</span>
+    <var>response</var>.</p>
+
+    <!-- TODO "Interaction with the Preload Scanner" from the picture spec -->
 
     <p>The resource obtained in this fashion, if any, is <var>image request</var>'s <span
     data-x="img-req-data">image data</span>. It can be either <span>CORS-same-origin</span> or
@@ -28846,8 +28848,18 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
     compatible with existing web content.</p>
    </li>
 
-   <li><p>Continue the remaining steps <span>in parallel</span>, but without missing any data from
-   fetching.</p></li>
+   <li>
+    <p>Let <var>finalize image loading</var> given <var>eventName</var> be the following:</p>
+
+    <ol>
+     <li><p><span>Finalize and report timing</span> with <var>response</var>, the <code>img</code>
+     element's <span>node document</span>'s <span>relevant global object</span>, and "<code
+     data-x="">img</code>".</p></li>
+
+     <li><p><span data-x="concept-event-fire">Fire an event</span> named <var>eventName</var> at
+     the <code>img</code> element.</p></li>
+    </ol>
+  </li>
 
    <li>
     <p>As soon as possible, jump to the first applicable entry from the following list:</p>
@@ -28898,12 +28910,17 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
       user agent is able to determine the image's width and height, it must <span data-x="prepare an
       image for presentation">prepare the <code>img</code> element's <span>current request</span>
       for presentation</span> given the <code>img</code> element and replace the previous image.
-      Once one body part has been completely decoded, the user agent must set the <code>img</code>
-      element's <span>current request</span>'s <span data-x="img-req-state">state</span> to <span
-      data-x="img-all">completely available</span> and <span>queue an element task</span> on the
-      <span>DOM manipulation task source</span> given the <code>img</code> element to <span
-      data-x="concept-event-fire">fire an event</span> named <code data-x="event-load">load</code>
-      at the <code>img</code> element.</p>
+      Once one body part has been completely decoded, perform the following steps:</p>
+
+      <ol>
+       <li><p>Set the <code>img</code> element's <span>current request</span>'s <span
+       data-x="img-req-state">state</span> to <span data-x="img-all">completely
+       available</span>.</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 <var>finalize image loading</var> with <code
+       data-x="event-load">load</code>.</p></li>
+      </ol>
       <!--TODO what if the image is broken?
           TODO change state and fire in the same task? -->
      </dd>
@@ -28935,15 +28952,14 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
        request</span> for the <span>current request</span> and the <span>pending request</span>,
        <span>upgrade the pending request to the current request</span>, set <span>current
        request</span>'s <span data-x="img-req-state">state</span> to <span
-       data-x="img-error">broken</span>, and <span data-x="concept-event-fire">fire an event</span>
-       named <code data-x="event-error">error</code> at the <code>img</code> element.</p></li>
+       data-x="img-error">broken</span>, and call <var>finalize image loading</var> with <code
+       data-x="event-error">error</code>.</p></li>
 
        <li><p>Otherwise, if the user agent is able to determine that <var>image request</var>'s
        image is corrupted in some fatal way such that the image dimensions cannot be obtained, and
        <var>image request</var> is <span>current request</span>, <span>abort the image
-       request</span> for <var>image request</var> and <span data-x="concept-event-fire">fire an
-       event</span> named <code data-x="event-error">error</code> at the <code>img</code>
-       element.</p></li>
+       request</span> for <var>image request</var> and call <var>finalize image loading</var> with
+       <code data-x="event-error">error</code>.</p></li>
       </ol>
 
       <p id="img-load">That <span data-x="concept-task">task</span>, and each subsequent <span
@@ -28974,10 +28990,11 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
        <li><p>Set <var>image request</var> to the <span data-x="img-all">completely
        available</span> state.</p></li>
 
-       <li><p>Add the image to the <span>list of available images</span> using the key <var>key</var>, with the <span>ignore higher-layer caching</span> flag set.</p></li>
+       <li><p>Add the image to the <span>list of available images</span> using the key
+       <var>key</var>, with the <span>ignore higher-layer caching</span> flag set.</p></li>
 
-       <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
-       data-x="event-load">load</code> at the <code>img</code> element.</p></li>
+       <li><p>Call <var>finalize image loading</var> with <code
+       data-x="event-load">load</code>.</p></li>
       </ol>
      </dd>
 
@@ -28989,8 +29006,8 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
      request</span> and the <span>pending request</span>, <span>upgrade the pending request to the
      current request</span> if <var>image request</var> is the <span>pending request</span>, and
      then <span>queue an element task</span> on the <span>DOM manipulation task source</span> given
-     the <code>img</code> element to <span data-x="concept-event-fire">fire an event</span> named
-     <code data-x="event-error">error</code> at the <code>img</code> element.</p></dd>
+     the <code>img</code> element to <var>finalize image loading</var> with <code
+     data-x="event-error">error</code>.</p></dd>
     </dl>
    </li>
   </ol>