[giow] (2) Try to define img synchronous loading.

Affected topics: HTML git-svn-id: http://svn.whatwg.org/webapps@7128 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Jun 11, 2012 · 3458488 · 3458488
1 parent 3452c26
commit 3458488
Show file tree

Hide file tree

Showing 3 changed files with 196 additions and 121 deletions.
diff --git a/complete.html b/complete.html
@@ -240,7 +240,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 8 June 2012</h2>
+    <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 11 June 2012</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -23732,6 +23732,18 @@ <h4 id=the-img-element><span class=secno>4.8.1 </span>The <dfn><code>img</code><
   per CSS inch, and thus if the image data is 300x600, it has an
   intrinsic dimension of 96 CSS pixels by 192 CSS pixels.</p>
 
+  <p>Each <code><a href=#document>Document</a></code> object must have a <dfn id=list-of-available-images>list of
+  available images</dfn>. Each image in this list is identified by a
+  tuple consisting of an <a href=#absolute-url>absolute URL</a>, a <a href=#cors-settings-attribute>CORS
+  settings attribute</a> mode, and, if the mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No CORS</a>, an
+  <a href=#origin>origin</a>. User agents may copy entries from one
+  <code><a href=#document>Document</a></code> object's <a href=#list-of-available-images>list of available images</a>
+  to another at any time (e.g. when the <code><a href=#document>Document</a></code> is
+  created, user agents can add to it all the images that are loaded in
+  other <code><a href=#document>Document</a></code>s), but must not change the keys of
+  entries copied in this way when doing so. User agents may also
+  remove images from such lists at any time (e.g. to save memory).</p>
+
   <p>When the user agent is to <dfn id=update-the-image-data>update the image data</dfn> of an
   <code><a href=#the-img-element>img</a></code> element, it must run the following steps:</p>
 
@@ -23748,6 +23760,47 @@ <h4 id=the-img-element><span class=secno>4.8.1 </span>The <dfn><code>img</code><
    <li><p>If the user agent cannot support images, or its support for
    images has been disabled, then abort these steps.</li>
 
+   <li>
+
+
+
+    <p>If the element has a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified, then
+    let <var title="">selected source</var> and <var title="">selected
+    pixel density</var> be the URL and pixel density that results from
+    <a href=#processing-the-image-candidates>processing the image candidates</a>, respectively.
+
+
+
+    Otherwise, if the element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute specified and its value
+    is not the empty string, let <var title="">selected source</var>
+    be the value of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and <var title="">selected pixel density</var> be 1.0. Otherwise, let <var title="">selected source</var> be null and <var title="">selected
+    pixel density</var> be undefined.</p>
+
+   </li>
+
+   <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected
+   source</a> be <var title="">selected source</var> and the
+   <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel density</a> be
+   <var title="">selected pixel density</var>.</li>
+
+   <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative to the element. If that is
+   not successful, abort these steps.</li>
+
+   <li><p>Let <var title="">key</var> be a tuple consisting of the
+   resulting <a href=#absolute-url>absolute URL</a>, the <code><a href=#the-img-element>img</a></code> element's
+   <code title=attr-crossorigin>crossorigin</code> attribute's mode,
+   and, if that mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No
+   CORS</a>, the <code><a href=#document>Document</a></code> object's
+   <a href=#origin>origin</a>.</li>
+
+   <li><p>If the <a href=#list-of-available-images>list of available images</a>, contains an
+   entry for <var title="">key</var>, then set the <code><a href=#the-img-element>img</a></code>
+   element to the <a href=#img-all title=img-all>completely available</a>
+   state, update the presentation of the image appropriately,
+   <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named
+   <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code>
+   element, and abort these steps.</li>
+
    <li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>, allowing
    the <a href=#concept-task title=concept-task>task</a> that invoked this
    algorithm to continue. The <a href=#synchronous-section>synchronous section</a>
@@ -23759,8 +23812,8 @@ <h4 id=the-img-element><span class=secno>4.8.1 </span>The <dfn><code>img</code><
    <li>
 
     <p>&#8987; If another instance of this algorithm for this
-    <code><a href=#the-img-element>img</a></code> element was started after this instance, then
-    abort these steps.</p>
+    <code><a href=#the-img-element>img</a></code> element was started after this instance (even if
+    it aborted and is no longer running), then abort these steps.</p>
 
     <p class=note>Only the last instance takes effect, to avoid
     multiple requests when, for example, the
@@ -23773,32 +23826,6 @@ <h4 id=the-img-element><span class=secno>4.8.1 </span>The <dfn><code>img</code><
 
    </li>
 
-   <li>
-
-    <p>&#8987;
-
-
-
-    If the element has a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>
-    attribute specified, then let <var title="">selected source</var>
-    and <var title="">selected pixel density</var> be the URL and
-    pixel density that results from <a href=#processing-the-image-candidates>processing the image
-    candidates</a>, respectively.
-
-
-
-    Otherwise, if the element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute specified and its value
-    is not the empty string, let <var title="">selected source</var>
-    be the value of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and <var title="">selected pixel density</var> be 1.0. Otherwise, let <var title="">selected source</var> be null and <var title="">selected
-    pixel density</var> be undefined.</p>
-
-   </li>
-
-   <li><p>&#8987; Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last
-   selected source</a> be <var title="">selected source</var> and
-   the <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel density</a>
-   be <var title="">selected pixel density</var>.</li>
-
    <li>
 
     <p>&#8987; If <var title="">selected source</var> is null, then
@@ -23811,13 +23838,9 @@ <h4 id=the-img-element><span class=secno>4.8.1 </span>The <dfn><code>img</code><
 
    <li>
 
-    <p>&#8987; <a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative to the element.</p>
-
-    <p>If that is not successful, abort these steps.</p>
-
-    <p>Otherwise, do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a> of
-    the resulting <a href=#absolute-url>absolute URL</a>, with the <i>mode</i>
-    being the state of the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute,
+    <p>Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a> of the
+    <a href=#absolute-url>absolute URL</a> that resulted from the earlier step,
+    with the <i>mode</i> being the state of the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute,
     the <i title="">origin</i> being the <a href=#origin>origin</a> of the
     <code><a href=#the-img-element>img</a></code> element's <code><a href=#document>Document</a></code>, and the
     <i>default origin behaviour</i> set to <i>taint</i>.</p>
@@ -23859,9 +23882,10 @@ <h4 id=the-img-element><span class=secno>4.8.1 </span>The <dfn><code>img</code><
     <dl class=switch><dt>If the download was successful</dt>
 
      <dd>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely available</a> state, update the
-     presentation of the image appropriately, and <a href=#fire-a-simple-event>fire a simple
-     event</a> named <code title=event-load>load</code> at the
-     <code><a href=#the-img-element>img</a></code> element.</dd>
+     presentation of the image appropriately, add the image to the
+     <a href=#list-of-available-images>list of available images</a> using the key <var title="">key</var>, and <a href=#fire-a-simple-event>fire a simple event</a> named
+     <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code>
+     element.</dd>
 
      <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1222 -->
 

diff --git a/index b/index
@@ -240,7 +240,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 8 June 2012</h2>
+    <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 11 June 2012</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -23732,6 +23732,18 @@ interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href=#htmlelement
   per CSS inch, and thus if the image data is 300x600, it has an
   intrinsic dimension of 96 CSS pixels by 192 CSS pixels.</p>
 
+  <p>Each <code><a href=#document>Document</a></code> object must have a <dfn id=list-of-available-images>list of
+  available images</dfn>. Each image in this list is identified by a
+  tuple consisting of an <a href=#absolute-url>absolute URL</a>, a <a href=#cors-settings-attribute>CORS
+  settings attribute</a> mode, and, if the mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No CORS</a>, an
+  <a href=#origin>origin</a>. User agents may copy entries from one
+  <code><a href=#document>Document</a></code> object's <a href=#list-of-available-images>list of available images</a>
+  to another at any time (e.g. when the <code><a href=#document>Document</a></code> is
+  created, user agents can add to it all the images that are loaded in
+  other <code><a href=#document>Document</a></code>s), but must not change the keys of
+  entries copied in this way when doing so. User agents may also
+  remove images from such lists at any time (e.g. to save memory).</p>
+
   <p>When the user agent is to <dfn id=update-the-image-data>update the image data</dfn> of an
   <code><a href=#the-img-element>img</a></code> element, it must run the following steps:</p>
 
@@ -23748,6 +23760,47 @@ interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href=#htmlelement
    <li><p>If the user agent cannot support images, or its support for
    images has been disabled, then abort these steps.</li>
 
+   <li>
+
+
+
+    <p>If the element has a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified, then
+    let <var title="">selected source</var> and <var title="">selected
+    pixel density</var> be the URL and pixel density that results from
+    <a href=#processing-the-image-candidates>processing the image candidates</a>, respectively.
+
+
+
+    Otherwise, if the element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute specified and its value
+    is not the empty string, let <var title="">selected source</var>
+    be the value of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and <var title="">selected pixel density</var> be 1.0. Otherwise, let <var title="">selected source</var> be null and <var title="">selected
+    pixel density</var> be undefined.</p>
+
+   </li>
+
+   <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected
+   source</a> be <var title="">selected source</var> and the
+   <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel density</a> be
+   <var title="">selected pixel density</var>.</li>
+
+   <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative to the element. If that is
+   not successful, abort these steps.</li>
+
+   <li><p>Let <var title="">key</var> be a tuple consisting of the
+   resulting <a href=#absolute-url>absolute URL</a>, the <code><a href=#the-img-element>img</a></code> element's
+   <code title=attr-crossorigin>crossorigin</code> attribute's mode,
+   and, if that mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No
+   CORS</a>, the <code><a href=#document>Document</a></code> object's
+   <a href=#origin>origin</a>.</li>
+
+   <li><p>If the <a href=#list-of-available-images>list of available images</a>, contains an
+   entry for <var title="">key</var>, then set the <code><a href=#the-img-element>img</a></code>
+   element to the <a href=#img-all title=img-all>completely available</a>
+   state, update the presentation of the image appropriately,
+   <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named
+   <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code>
+   element, and abort these steps.</li>
+
    <li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>, allowing
    the <a href=#concept-task title=concept-task>task</a> that invoked this
    algorithm to continue. The <a href=#synchronous-section>synchronous section</a>
@@ -23759,8 +23812,8 @@ interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href=#htmlelement
    <li>
 
     <p>&#8987; If another instance of this algorithm for this
-    <code><a href=#the-img-element>img</a></code> element was started after this instance, then
-    abort these steps.</p>
+    <code><a href=#the-img-element>img</a></code> element was started after this instance (even if
+    it aborted and is no longer running), then abort these steps.</p>
 
     <p class=note>Only the last instance takes effect, to avoid
     multiple requests when, for example, the
@@ -23773,32 +23826,6 @@ interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href=#htmlelement
 
    </li>
 
-   <li>
-
-    <p>&#8987;
-
-
-
-    If the element has a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>
-    attribute specified, then let <var title="">selected source</var>
-    and <var title="">selected pixel density</var> be the URL and
-    pixel density that results from <a href=#processing-the-image-candidates>processing the image
-    candidates</a>, respectively.
-
-
-
-    Otherwise, if the element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute specified and its value
-    is not the empty string, let <var title="">selected source</var>
-    be the value of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and <var title="">selected pixel density</var> be 1.0. Otherwise, let <var title="">selected source</var> be null and <var title="">selected
-    pixel density</var> be undefined.</p>
-
-   </li>
-
-   <li><p>&#8987; Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last
-   selected source</a> be <var title="">selected source</var> and
-   the <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel density</a>
-   be <var title="">selected pixel density</var>.</li>
-
    <li>
 
     <p>&#8987; If <var title="">selected source</var> is null, then
@@ -23811,13 +23838,9 @@ interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href=#htmlelement
 
    <li>
 
-    <p>&#8987; <a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative to the element.</p>
-
-    <p>If that is not successful, abort these steps.</p>
-
-    <p>Otherwise, do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a> of
-    the resulting <a href=#absolute-url>absolute URL</a>, with the <i>mode</i>
-    being the state of the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute,
+    <p>Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a> of the
+    <a href=#absolute-url>absolute URL</a> that resulted from the earlier step,
+    with the <i>mode</i> being the state of the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute,
     the <i title="">origin</i> being the <a href=#origin>origin</a> of the
     <code><a href=#the-img-element>img</a></code> element's <code><a href=#document>Document</a></code>, and the
     <i>default origin behaviour</i> set to <i>taint</i>.</p>
@@ -23859,9 +23882,10 @@ interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href=#htmlelement
     <dl class=switch><dt>If the download was successful</dt>
 
      <dd>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely available</a> state, update the
-     presentation of the image appropriately, and <a href=#fire-a-simple-event>fire a simple
-     event</a> named <code title=event-load>load</code> at the
-     <code><a href=#the-img-element>img</a></code> element.</dd>
+     presentation of the image appropriately, add the image to the
+     <a href=#list-of-available-images>list of available images</a> using the key <var title="">key</var>, and <a href=#fire-a-simple-event>fire a simple event</a> named
+     <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code>
+     element.</dd>
 
      <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1222 -->