Skip to content

Commit

Permalink
Merge branch 'lazyloading' of ssh://github.com/bengreenstein/html int…
Browse files Browse the repository at this point in the history 
…o lazyloading
  • Loading branch information
@bengreenstein
bengreenstein committed Dec 14, 2018
2 parents edc1e95 + 8db807c commit b2cdf21
Showing 1 changed file with 110 additions and 10 deletions.
120 changes: 110 additions & 10 deletions source
View file
Expand Up @@ -2795,6 +2795,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x="concept-request-method" data-x-href="https://fetch.spec.whatwg.org/#concept-request-method">method</dfn></li>
<li><dfn data-x="concept-request-header-list" data-x-href="https://fetch.spec.whatwg.org/#concept-request-header-list">header list</dfn></li>
<li><dfn data-x="concept-request-body" data-x-href="https://fetch.spec.whatwg.org/#concept-request-body">body</dfn></li>
<li><dfn data-x="concept-request-add-range-header" data-x-href="https://fetch.spec.whatwg.org/#concept-request-add-range-header">add a range header</dfn></li>
<li><dfn data-x="concept-request-client" data-x-href="https://fetch.spec.whatwg.org/#concept-request-client">client</dfn></li>
<li><dfn data-x="concept-request-current-url" data-x-href="https://fetch.spec.whatwg.org/#concept-request-current-url">current URL</dfn></li>
<li><dfn data-x="concept-request-reserved-client" data-x-href="https://fetch.spec.whatwg.org/#concept-request-reserved-client">reserved client</dfn></li>
Expand Down Expand Up @@ -7211,6 +7212,42 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<code>HTMLOrSVGElement</code> must set the <span>[[CryptographicNonce]]</span> slot on the copy
to the value of the slot on the element being cloned.</p>

<h4>Lazy loading attributes</h4>

<p>A <dfn>lazy loading attribute</dfn> is an <span>enumerated attribute</span>. The following
table lists the keywords and states for the attribute &mdash; the keywords in the left column map
to the states in the cell in the second column on the same row as the keyword.</p>

<p>The attribute provides a hint to the user agent to aid in deciding whether to load an element
immediately or to defer loading until the element will be viewable, according to the attribute's
current state.</p>

<table>
<thead>
<tr>
<th>Keyword
<th>State
<th>Description
<tbody>
<tr>
<td><dfn><code data-x="attr-lazyload-on">on</code></dfn>
<td><dfn data-x="attr-lazyload-on-state">On</dfn>
<td>Indicates a strong preference to defer fetching the element's resource until it will be
viewable.
<tr>
<td><dfn><code data-x="attr-lazyload-off">off</code></dfn>
<td><dfn data-x="attr-lazyload-off-state">Off</dfn>
<td>Indicates the element's resource must be fetched immediately, regardless of viewability.
<tr>
<td><dfn><code data-x="attr-lazyload-auto">auto</code></dfn>
<td><dfn data-x="attr-lazyload-auto-state">Auto</dfn>
<td>Indicates that the user agent may determine the fetching strategy (the default).
</table>

<p>The attribute's <i data-x="missing value default">missing value default</i> and <i
data-x="invalid value default">invalid value default</i> are both the <span
data-x="attr-lazyload-auto-state">Auto</span> state.</p>


<h3 split-filename="common-dom-interfaces">Common DOM interfaces</h3>

Expand Down Expand Up @@ -25711,6 +25748,7 @@ interface <dfn>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
<dd><code data-x="attr-dim-height">height</code></dd>
<dd><code data-x="attr-img-referrerpolicy">referrerpolicy</code></dd>
<dd><code data-x="attr-img-decoding">decoding</code></dd>
<dd><code data-x="attr-img-lazyload">lazyload</code></dd>
<dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
<dd w-nodev>
<pre><code class="idl" data-x="">[Exposed=Window,
Expand All @@ -25732,6 +25770,7 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
readonly attribute USVString <span data-x="dom-img-currentSrc">currentSrc</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-img-referrerPolicy">referrerPolicy</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-img-decoding">decoding</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-img-lazyLoad">lazyLoad</span>;

Promise&lt;void&gt; <span data-x="dom-img-decode">decode</span>();
};</code></pre>
Expand Down Expand Up @@ -25807,6 +25846,10 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
default">missing value default</i> and <i data-x="invalid value default">invalid value
default</i> are both the <span data-x="attr-img-decoding-auto-state">auto</span> state.</p>

<p>The <dfn data-x="attr-img-lazyload"><code>lazyload</code></dfn> attribute is a <span>lazy
loading attribute</span>. Its purpose is to indicate the policy for loading images that are
outside the viewport.

<hr>

<p>The <code>img</code> element must not be used as a layout tool. In particular, <code>img</code>
Expand Down Expand Up @@ -25997,6 +26040,10 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
<span>reflect</span> the <code data-x="attr-img-decoding">decoding</code> content
attribute, <span>limited to only known values</span>.

<p>The <dfn><code data-x="dom-img-lazyLoad">lazyLoad</code></dfn> IDL attribute must
<span>reflect</span> the <code data-x="attr-img-lazyload">lazyload</code> content
attribute, <span>limited to only known values</span>.

</div>

<dl class="domintro">
Expand Down Expand Up @@ -26044,14 +26091,6 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {

</dd>

<dt><var>image</var> . <code subdfn data-x="dom-img-decoding">decoding</code></dt>

<dd>

<p>Returns the <span>image decoding hint</span> set for this image.</p>

</dd>

<dt><var>image</var> . <code subdfn data-x="dom-img-decode">decode</code>()</dt>

<dd>
Expand Down Expand Up @@ -27257,7 +27296,12 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
<p>In a <span>browsing context</span> where <span data-x="concept-bc-noscript">scripting is
disabled</span>, user agents may obtain images immediately or on demand. In a <span>browsing
context</span> where <span data-x="concept-bc-noscript">scripting is enabled</span>, user agents
must obtain images immediately.</p>
must obtain images immediately when the CSS boxes those images intersect the
<span>viewport</span>, or when the corresponding <code>img</code> element's <code
data-x="attr-img-lazyload">lazyload</code> attribute is in the <span
data-x="attr-lazyload-off-state">Off</span> state. Otherwise, they may obtain images immediately
or on demand, using the current state of the corresponding <code>img</code> element's <code
data-x="attr-img-lazyload">lazyload</code> attribute to guide the decision.</p>

<p>A user agent that obtains images immediately must synchronously
<span>update the image data</span> of an <code>img</code> element,
Expand All @@ -27272,6 +27316,38 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
obtains images on demand, the <code>img</code> element's <span>current request</span>'s <span
data-x="img-req-state">state</span> must return to <span data-x="img-none">unavailable</span>.</p>

<p>If the <code>img</code> element's <code data-x="attr-img-lazyload">lazyload</code> attribute is
not in the <span data-x="attr-lazyload-off-state">Off</span> state, the user agent may immediately
fetch metadata from the image header. To fetch image metadata, the user agent must run the
following steps:</p>

<ol>
<li><p>Let <var>request</var> be the result of <span data-x="create a potential-CORS
request">creating a potential-CORS request</span> given <var>urlString</var>, "<code
data-x="">image</code>", and the current state of the element's <code
data-x="attr-img-crossorigin">crossorigin</code> content attribute.</p></li>

<li><p>Set <var>request</var>'s <span data-x="concept-request-client">client</span> to the
element's <span>node document</span>'s <code>Window</code> object's <span>environment settings
object</span>.</p></li>

<li><p>If the element <span data-x="use srcset or picture">uses <code>srcset</code> or
<code>picture</code></span>, set <var>request</var>'s <span
data-x="concept-request-initiator">initiator</span> to "<code
data-x="">imageset</code>".</p></li>

<li><p>Set <var>request</var>'s <span data-x="concept-request-referrer-policy">referrer
policy</span> to the current state of the element's <code
data-x="attr-img-referrerpolicy">referrerpolicy</code> attribute.</p></li>

<li><p>Then <span data-x="concept-request-add-range-header">add a range header</span> to
<var>request</var> starting at byte 0 and ending with as many bytes of the image file as the
user agent determines is reasonable to retrieve metatdata.</p></li>

<li><p><span data-x="concept-fetch">Fetch</span> <var>request</var>, and use the metadata
contained in the response as appropriate for the image.</p></li>
</ol>


<h6>Reacting to DOM mutations</h6>

Expand Down Expand Up @@ -29500,6 +29576,7 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></code></pre>
<dd><code data-x="attr-dim-width">width</code></dd>
<dd><code data-x="attr-dim-height">height</code></dd>
<dd><code data-x="attr-iframe-referrerpolicy">referrerpolicy</code></dd>
<dd><code data-x="attr-iframe-lazyload">lazyload</code></dd>
<dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
<dd w-nodev>
<pre><code class="idl" data-x="">[Exposed=Window,
Expand All @@ -29515,6 +29592,7 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-dim-width">width</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-dim-height">height</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-iframe-referrerPolicy">referrerPolicy</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-iframe-lazyLoad">lazyLoad</span>;
readonly attribute <span>Document</span>? <span data-x="dom-iframe-contentDocument">contentDocument</span>;
readonly attribute <span>WindowProxy</span>? <span data-x="dom-iframe-contentWindow">contentWindow</span>;
<span>Document</span>? <span data-x="dom-media-getSVGDocument">getSVGDocument</span>();
Expand Down Expand Up @@ -29713,7 +29791,11 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
<dt>Otherwise</dt>

<dd><p>Run the <span>otherwise steps for <code>iframe</code> or <code>frame</code>
elements</span>.</p></dd>
elements</span>. If the element's <code data-x="attr-iframe-lazyload">lazyload</code> attribute
is in the <span data-x="attr-lazyload-on-state">On</span> or <span
data-x="attr-lazyload-auto-state">Auto</span> states, and the element's CSS layout box does not
intersect the <span>viewport</span>, then running these steps may be deferred until such
intersection occurs.</p></dd>

</dl>

Expand Down Expand Up @@ -30119,6 +30201,12 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
used when <span data-x="process the iframe attributes">processing the <code>iframe</code>
attributes</span>. <ref spec=REFERRERPOLICY></p>

<hr> <!-- LAZYLOAD ATTRIBUTE -->

<p>The <dfn data-x="attr-iframe-lazyload"><code>lazyload</code></dfn> attribute is a
<span>lazy loading attribute</span>. It indicates the policy for loading <code>iframe</code>
elements that are outside the viewport.

<hr> <!-- FALLBACK -->

<p>Descendants of <code>iframe</code> elements represent nothing. (In legacy user agents that do
Expand Down Expand Up @@ -30157,6 +30245,10 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
must <span>reflect</span> the <code data-x="attr-iframe-referrerpolicy">referrerpolicy</code>
content attribute, <span>limited to only known values</span>.</p>

<p>The <dfn><code data-x="dom-iframe-lazyLoad">lazyLoad</code></dfn> IDL attribute must
<span>reflect</span> the <code data-x="attr-iframe-lazyload">lazyload</code> content
attribute, <span>limited to only known values</span>.

<p>The <dfn><code data-x="dom-iframe-contentDocument">contentDocument</code></dfn> IDL attribute,
on getting, must return the <code>iframe</code> element's <span
data-x="concept-bcc-content-document">content document</span>.</p>
Expand Down Expand Up @@ -118961,6 +119053,14 @@ interface <dfn>External</dfn> {
<td> "<code data-x="attr-img-decoding-sync">sync</code>";
"<code data-x="attr-img-decoding-async">async</code>";
"<code data-x="attr-img-decoding-auto">auto</code>"
<tr>
<th> <code data-x="">lazyload</code>
<td> <code data-x="attr-img-lazyload">img</code>;
<code data-x="attr-iframe-lazyload">iframe</code>
<td> Hint to use when determining loading deferral
<td> "<code data-x="attr-lazyload-on">on</code>";
"<code data-x="attr-lazyload-off">off</code>";
"<code data-x="attr-lazyload-auto">auto</code>"
<tr>
<th> <code data-x="">default</code>
<td> <code data-x="attr-track-default">track</code>
Expand Down

0 comments on commit b2cdf21

Please sign in to comment.