Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Lazyload iframes #5579

Merged
merged 10 commits into from
Jul 8, 2020
Merged

Lazyload iframes #5579

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9e16007
Start iframe lazyload spec
domfarolino May 26, 2020
aa59e38
Invoke the resumption steps on setting attr to eager
domfarolino Jun 2, 2020
f8c8d2c
Update example
domfarolino Jun 2, 2020
09aee3e
Return if will lazy load is true
domfarolino Jun 2, 2020
f6725aa
Address zcorpan review 1/2
domfarolino Jun 15, 2020
d246315
Label where resumption steps start
domfarolino Jun 15, 2020
4d82850
Add iframe srcdoc lazyloading support
domfarolino Jun 26, 2020
c96b174
Don't need to check for iframe in iframe srcdoc steps
domfarolino Jun 26, 2020
b8b6a25
Add current navigation was lazy loaded boolean
domfarolino Jun 29, 2020
d781928
Address zcorpan nit
domfarolino Jun 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 113 additions & 30 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6822,13 +6822,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><p>Return false.</p></li>
</ol>

<p>Each <code>img</code> element has associated <dfn>lazy load resumption steps</dfn>, initially
null.</p>
<p>Each <code>img</code> and <code>iframe</code> element has associated <dfn>lazy load resumption
steps</dfn>, initially null.</p>

<p class="note">For <code>img</code> elements that <span data-x="will lazy load element
steps">will lazy load</span>, this can be set to true in the <span>lazy load intersection
observer</span>'s callback, which causes the image to load by continuing the <span>update the
image data</span> steps.</p>
<p class="note">For <code>img</code> and <code>iframe</code> elements that <span data-x="will lazy
load element steps">will lazy load</span>, these steps are run from the <span>lazy load
intersection observer</span>'s callback or when their <span>lazy loading attribute</span> is set
to the <span data-x="attr-loading-eager-state">Eager</span> state. This causes the element to
continue loading.</p>

<p>Each <code>Document</code> has a <dfn>lazy load intersection observer</dfn>, initially set to
null but can be set to an <code>IntersectionObserver</code> instance.</p>
Expand Down Expand Up @@ -25966,8 +25967,9 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
loading attribute</span>. Its purpose is to indicate the policy for loading images that are
outside the viewport.</p>

<p>When the <code data-x="attr-img-loading">loading</code> attribute is set to the <span
data-x="attr-loading-eager-state">Eager</span> state, the user agent must run these steps:</p>
<p>When the <code data-x="attr-img-loading">loading</code> attribute's state is changed to the
domfarolino marked this conversation as resolved.
Show resolved Hide resolved
<span data-x="attr-loading-eager-state">Eager</span> state, the user agent must run these
steps:</p>

<ol>
<li><p>Let <var>resumptionSteps</var> be the <code>img</code> element's <span>lazy load
Expand Down Expand Up @@ -27768,7 +27770,7 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code

<ol>
<li><p>Set the <code>img</code>'s <span>lazy load resumption steps</span> to the rest of this
algorithm.</p></li>
algorithm starting with the step labeled <i>fetch the image</i>.</p></li>

<li><p><span>Start intersection-observing a lazy loading element</span> for the
<code>img</code> element.</p></li>
Expand All @@ -27779,8 +27781,9 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code

<li>
<!--FETCH-->
<p><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>.
<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>The resource obtained in this fashion, if any, is <var>image request</var>'s <span
Expand Down Expand Up @@ -29555,6 +29558,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-loading">loading</code></dd>
<dt><span
data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
<dd><a href="https://w3c.github.io/html-aria/#el-iframe">For authors</a>.</dd>
Expand All @@ -29575,6 +29579,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-loading">loading</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 @@ -29739,21 +29744,48 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
<dt>If the <code data-x="attr-iframe-srcdoc">srcdoc</code> attribute is specified</dt>

<dd>
<p><span>Navigate</span><!--DONAV iframe--> the element's <span>nested browsing context</span>
to a new <span data-x="concept-response">response</span> whose <span
data-x="concept-response-url-list">url list</span> consists of <code>about:srcdoc</code>, <span
data-x="concept-response-header-list">header list</span> consists of `<code
data-x="">Content-Type</code>`/`<code>text/html</code>`, <span
data-x="concept-response-body">body</span> is the value of the attribute, <span
data-x="concept-response-csp-list">CSP list</span> is a <span data-x="list clone">clone</span>
of the <code>iframe</code> element's <span>node document</span>'s <span
data-x="concept-document-csp-list">CSP list</span>, <span
data-x="concept-response-https-state">HTTPS state</span> is the <span
data-x="concept-document-https-state">HTTPS state</span> of the <code>iframe</code> element's
<span>node document</span>.
<ol>
<li><p>Set the <code>iframe</code>'s <span>current navigation was lazy loaded</span> boolean
to false.</p></li>

<li>
<p>If the <span>will lazy load element steps</span> given the <code>iframe</code> element
return true, then:</p>

<p>The resulting <code>Document</code> must be considered <span>an <code>iframe</code> <code
data-x="attr-iframe-srcdoc">srcdoc</code> document</span>.</p>
<ol>
<li><p>Set the <code>iframe</code>'s <span>lazy load resumption steps</span> to the rest of
this algorithm starting with the step labeled
<i>navigate to the srcdoc resource</i>.</p></li>

<li><p>Set the <code>iframe</code>'s <span>current navigation was lazy loaded</span> boolean
to true.</p></li>

<li><p><span>Start intersection-observing a lazy loading element</span> for the
<code>iframe</code> element.</p></li>

<li><p>Return.</p></li>
</ol>
</li>

<li>
<p><i>Navigate to the srcdoc resource</i>: <span>Navigate</span><!--DONAV iframe--> the
element's <span>nested browsing context</span> to a new <span
data-x="concept-response">response</span> whose <span data-x="concept-response-url-list">url
list</span> consists of <code>about:srcdoc</code>, <span
data-x="concept-response-header-list">header list</span> consists of `<code
data-x="">Content-Type</code>`/`<code>text/html</code>`, <span
data-x="concept-response-body">body</span> is the value of the attribute, <span
data-x="concept-response-csp-list">CSP list</span> is a <span data-x="list clone">clone</span>
of the <code>iframe</code> element's <span>node document</span>'s <span
data-x="concept-document-csp-list">CSP list</span>, <span
data-x="concept-response-https-state">HTTPS state</span> is the <span
data-x="concept-document-https-state">HTTPS state</span> of the <code>iframe</code> element's
<span>node document</span>.

<p>The resulting <code>Document</code> must be considered <span>an <code>iframe</code> <code
data-x="attr-iframe-srcdoc">srcdoc</code> document</span>.</p>
</li>
</ol>
</dd>

<dt>Otherwise, if the element has no <code data-x="attr-iframe-src">src</code> attribute
Expand Down Expand Up @@ -29803,8 +29835,29 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
element's <code data-x="attr-iframe-referrerpolicy">referrerpolicy</code> content
attribute.</p></li>

<li><p><span>Navigate</span><!--DONAV iframe--> the element's <span>nested browsing
context</span> to <var>resource</var>.</p></li>
<li><p>Set the <code>iframe</code>'s <span>current navigation was lazy loaded</span> boolean to
false.</p></li>

<li>
<p>If the element is an <code>iframe</code> element, and the <span>will lazy load element
steps</span> given the element return true, then:</p>

<ol>
<li><p>Set the <code>iframe</code>'s <span>lazy load resumption steps</span> to the rest of
this algorithm starting with the step labeled <i>navigate to the resource</i>.</p></li>

<li><p>Set the <code>iframe</code>'s <span>current navigation was lazy loaded</span> boolean
to true.</p></li>

<li><p><span>Start intersection-observing a lazy loading element</span> for the
<code>iframe</code> element.</p></li>

<li><p>Return.</p></li>
</ol>
</li>

<li><p><i>Navigate to the resource</i>: <span>Navigate</span><!--DONAV iframe--> the element's
<span>nested browsing context</span> to <var>resource</var>.</p></li>
</ol>

<p>Any <span data-x="navigate">navigation</span> required of the user agent in the <span>process
Expand Down Expand Up @@ -29879,7 +29932,12 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
<var>element</var>'s <span>nested browsing context</span> is again <span
data-x="navigate">navigated</span>, that will further <span>delay the load event</span>.</p>

<p>The <code>iframe</code> element <span>potentially delays the load event</span>.</p>
<p>Each <code>iframe</code> element has an associated <dfn>current navigation was lazy
loaded</dfn> boolean, initially false. It is set and unset in the <span>process the
<code>iframe</code> attributes</span> algorithm.</p>

<p>An <code>iframe</code> element whose <span>current navigation was lazy loaded</span> boolean is
false <span>potentially delays the load event</span>.</p>

</div>

Expand Down Expand Up @@ -30171,6 +30229,25 @@ 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>

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

<p>When the <code data-x="attr-iframe-loading">loading</code> attribute's state is changed to the
<span data-x="attr-loading-eager-state">Eager</span> state, the user agent must run these
steps:</p>

<ol>
<li><p>Let <var>resumptionSteps</var> be the <code>iframe</code> element's <span>lazy load
resumption steps</span>.</p></li>

<li><p>If <var>resumptionSteps</var> is null, then return.</p></li>

<li><p>Set the <code>iframe</code>'s <span>lazy load resumption steps</span> to null.</p></li>

<li><p>Invoke <var>resumptionSteps</var>.</p></li>
</ol>

<hr> <!-- FALLBACK -->

<p>Descendants of <code>iframe</code> elements represent nothing. (In legacy user agents that do
Expand Down Expand Up @@ -30209,6 +30286,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-loading">loading</code></dfn> IDL attribute must
<span>reflect</span> the <code data-x="attr-iframe-loading">loading</code> content attribute,
<span>limited to only known values</span>.</p>

<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 @@ -116453,7 +116534,8 @@ interface <dfn>External</dfn> {
<code data-x="attr-iframe-allowpaymentrequest">allowpaymentrequest</code>;
<code data-x="attr-dim-width">width</code>;
<code data-x="attr-dim-height">height</code>;
<code data-x="attr-iframe-referrerpolicy">referrerpolicy</code></td>
<code data-x="attr-iframe-referrerpolicy">referrerpolicy</code>;
<code data-x="attr-iframe-loading">loading</code></td>
<td><code>HTMLIFrameElement</code></td>
</tr>

Expand Down Expand Up @@ -118066,7 +118148,8 @@ interface <dfn>External</dfn> {
"<code data-x="attr-img-decoding-auto">auto</code>"
<tr>
<th> <code data-x="">loading</code>
<td> <code data-x="attr-img-loading">img</code>
<td> <code data-x="attr-img-loading">img</code>;
<code data-x="attr-iframe-loading">iframe</code>
<td> Used when determining loading deferral
<td> "<code data-x="attr-loading-lazy">lazy</code>";
"<code data-x="attr-loading-eager">eager</code>"
Expand Down