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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add loading attribute to source elements #7237

Closed
wants to merge 1 commit into from
Closed

Add loading attribute to source elements #7237

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 15 additions & 5 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26421,6 +26421,7 @@ interface <dfn interface>HTMLPictureElement</dfn> : <span>HTMLElement</span> {
<dd><code data-x="attr-source-media">media</code> (in <code>picture</code>)</dd>
<dd><code data-x="attr-dim-width">width</code> (in <code>picture</code>)</dd>
<dd><code data-x="attr-dim-height">height</code> (in <code>picture</code>)</dd>
<dd><code data-x="attr-source-loading">loading</code> (in <code>picture</code>)</dd>
<dt><span
data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
<dd><a href="https://w3c.github.io/html-aria/#el-source">For authors</a>.</dd>
Expand All @@ -26438,6 +26439,7 @@ interface <dfn interface>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-source-media">media</span>;
[<span>CEReactions</span>] attribute unsigned long <span data-x="dom-dim-width">width</span>;
[<span>CEReactions</span>] attribute unsigned long <span data-x="dom-dim-height">height</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-source-loading">loading</span>;
};</code></pre>
</dd>
<dd w-dev>Uses <code>HTMLSourceElement</code>.</dd>
Expand Down Expand Up @@ -26483,6 +26485,12 @@ interface <dfn interface>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
those on the <code>img</code> element itself, to determine its rendered dimensions and
aspect-ratio, <a href="#dimRendering">as defined in the Rendering section</a>.</p>

<p>The <dfn element-attr for="source" data-x="attr-source-loading"><code>loading</code></dfn>
attribute is a <span>lazy loading attribute</span>. The <code>img</code> element can use the
<code data-x="attr-source-loading">loading</code> attribute of a <code>source</code> element,
instead of those on the <code>img</code> element itself, to determine its
<a href="#attr-img-loading">loading policy</a>.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see the processing model implications for this attribute spelled out elsewhere.


<p>The <code data-x="attr-source-type">type</code> attribute gives the type of the images in the
<span>source set</span>, to allow the user agent to skip to the next <code>source</code> element
if it does not support the given type.</p>
Expand Down Expand Up @@ -26634,7 +26642,8 @@ interface <dfn interface>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
data-x="dom-source-type">type</code></dfn>, <dfn attribute for="HTMLSourceElement"
data-x="dom-source-srcset"><code>srcset</code></dfn>, <dfn attribute for="HTMLSourceElement"
data-x="dom-source-sizes"><code>sizes</code></dfn> and <dfn attribute for="HTMLSourceElement"
data-x="dom-source-media"><code>media</code></dfn> must <span>reflect</span> the respective
data-x="dom-source-media"><code>media</code></dfn> and <dfn attribute for="HTMLSourceElement"
data-x="dom-source-loading"><code>loading</code></dfn> must <span>reflect</span> the respective
content attributes of the same name.</p>

</div>
Expand Down Expand Up @@ -26807,9 +26816,9 @@ interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {
default">invalid value default</i> are both the <span
data-x="attr-img-decoding-auto-state">auto</span> state.</p>

<p>The <dfn element-attr for="img" data-x="attr-img-loading"><code>loading</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.</p>
<p>The <dfn element-attr for="img" data-x="attr-img-loading"><code>loading</code></dfn> attribute
is a <span>lazy loading attribute</span> initially set to the element itself. 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's state is changed to the
<span data-x="attr-loading-eager-state">Eager</span> state, the user agent must run these
Expand Down Expand Up @@ -123795,7 +123804,8 @@ interface <dfn interface>External</dfn> {
<tr>
<th> <code data-x="">loading</code>
<td> <code data-x="attr-img-loading">img</code>;
<code data-x="attr-iframe-loading">iframe</code>
<code data-x="attr-iframe-loading">iframe</code>;
<code data-x="attr-source-loading">source</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