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 5 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
64 changes: 54 additions & 10 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 value 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 @@ -29555,6 +29557,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 +29578,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 @@ -29803,6 +29807,21 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
element's <code data-x="attr-iframe-referrerpolicy">referrerpolicy</code> content
attribute.</p></li>

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

<ol>
domfarolino marked this conversation as resolved.
Show resolved Hide resolved
<li><p>Set the <code>iframe</code>'s <span>lazy load resumption steps</span> to the rest of
this algorithm.</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><span>Navigate</span><!--DONAV iframe--> the element's <span>nested browsing
context</span> to <var>resource</var>.</p></li>
</ol>
Expand Down Expand Up @@ -30171,6 +30190,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 +30247,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 +116495,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 +118109,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