Skip to content
Permalink
Browse files

[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
  • Loading branch information...
Hixie committed Jun 11, 2012
1 parent 3452c26 commit 34584888d9e21e6a148c693d46c1336362fc95c7
Showing with 196 additions and 121 deletions.
  1. +63 −39 complete.html
  2. +63 −39 index
  3. +70 −43 source

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

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

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

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

102 index

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

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

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

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

0 comments on commit 3458488

Please sign in to comment.
You can’t perform that action at this time.