diff --git a/source b/source index a65eae126d1..6374d2ab99f 100644 --- a/source +++ b/source @@ -8010,11 +8010,11 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute Brief description - lazy + lazy Lazy Used to defer fetching a resource until some conditions are met. - eager + eager Eager Used to fetch a resource immediately; the default state. @@ -8053,14 +8053,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute -

Each img and iframe element has associated lazy load resumption - steps, initially null.

+

Each img, audio, video, and iframe element has associated + lazy load resumption steps, initially null.

-

For img and iframe elements that will lazy load, these steps are run from the lazy load - intersection observer's callback or when their lazy loading attribute is set - to the Eager state. This causes the element to - continue loading.

+

For img, audio, video, and iframe elements that + will lazy load, these steps are run from the + lazy load intersection observer's callback or when their lazy loading + attribute is set to the Eager state. This + causes the element to continue loading.

Each Document has a lazy load intersection observer, initially set to null but can be set to an IntersectionObserver instance.

@@ -36349,6 +36349,7 @@ interface HTMLObjectElement : HTMLElement {
loop
muted
controls
+
loading
width
height
HTMLVideoElement : HTMLMediaElement readonly attribute unsigned long videoHeight; [CEReactions, ReflectURL] attribute USVString poster; [CEReactions, Reflect] attribute boolean playsInline; + };
Uses HTMLVideoElement.
@@ -36436,7 +36438,11 @@ interface HTMLVideoElement : HTMLMediaElement data-x="concept-request-destination">destination is "image", initiator type is "video", credentials mode is "include", and whose use-URL-credentials flag is set. + data-x="">include", and whose use-URL-credentials flag is set.

+ +

  • If the will lazy load element steps given the video return true, + then return.

    • +

  • Fetch request. This must delay the load event of the element's node document.

    • @@ -36467,6 +36473,67 @@ interface HTMLVideoElement : HTMLMediaElement agents have chosen to play all videos inline by default, and in such user agents the playsinline attribute has no effect.

    +

    If the poster attribute is present and the loading attribute is in the Lazy state, the user agent must defer loading the poster + image source data until the element's lazy load resumption steps are invoked.

    + +
    + 
    <video src="1.mp4" poster="1.jpg" type="video/mp4">
+<video src="2.mp4" type="video/mp4" loading="eager">
+<video src="3.mp4" type="video/mp4" loading="lazy">
+<video src="4.mp4" type="video/mp4" loading="lazy" autoplay>
+<div id="very-large"></div> <!-- Everything after this div is below the viewport -->
+<video src="5.mp4" type="video/mp4">
+<video src="6.mp4" type="video/mp4" loading="lazy">
+<video src="7.mp4" type="video/mp4" autoplay loading="lazy">
+<video src="8.mp4" type="video/mp4" poster="8.jpg" loading="lazy">
+<video src="9.mp4" type="video/mp4" preload="none" poster="9.jpg" loading="lazy">
+<video src="10.mp4" type="video/mp4" preload="metadata" loading="lazy">
+<video src="11.mp4" type="video/mp4" poster="11.jpg" preload="none" loading="eager">
    + +

    In the example above, the videos load as follows:

    + +
    +
    1.mp4
    +

    The video and poster image load eagerly and delay the window's load event.

    + +
    2.mp4, 5.mp4
    +

    The videos load eagerly and delay the window's load event.

    + +
    3.mp4
    +

    The video loads when layout is known, due to being in the viewport, however it does + not delay the window's load event.

    + +
    4.mp4
    +

    The video loads and autoplay playback begins when layout is known, due to being in + the viewport, however it does not delay the window's load event.

    + +
    6.mp4
    +

    The video loads only once scrolled into the viewport, and does not delay the window's + load event.

    + +
    7.mp4
    +

    The video loads and autoplay playback begins only once scrolled into the viewport, + and does not delay the window's load event.

    + +
    8.mp4
    +

    The video and poster image load only once scrolled into the viewport, and does not + delay the window's load event.

    + +
    9.mp4
    +

    The video does not load until played. The poster image loads only once scrolled into + the viewport, and does not delay the window's load event.

    + +
    10.mp4
    +

    The video's metadata loads only once scrolled into the viewport, and does not delay + the window's load event.

    + +
    11.mp4
    +

    The video does not load until played. The poster image loads eagerly and delays the window's load event.

    +
    +
    +
    @@ -36749,6 +36816,7 @@ zero or more track elements, then
    loop
    muted
    controls
    +
    loading
    Accessibility considerations:
    For authors.
    @@ -36802,10 +36870,53 @@ interface HTMLAudioElement : HTMLMediaElement

    The src, crossorigin, preload, autoplay, - loop, muted, and controls attributes are loop, muted, controls, and loading attributes are the attributes common to all media elements.

    +

    audio elements without a controls attribute will not be displayed by the user agent, preventing them from lazy loading.

    + +
    + 
    <audio src="1.mp3" type="audio/mpeg" controls>
+<audio src="2.mp3" type="audio/mpeg" controls loading="eager">
+<audio src="3.mp3" type="audio/mpeg" controls loading="lazy">
+<audio src="4.mp3" type="audio/mpeg" controls loading="lazy" autoplay>
+<div id="very-large"></div> <!-- Everything after this div is below the viewport -->
+<audio src="5.mp3" type="audio/mpeg" controls>
+<audio src="6.mp3" type="audio/mpeg" controls loading="lazy">
+<audio src="7.mp3" type="audio/mpeg" controls autoplay loading="lazy">
+<audio src="8.mp3" type="audio/mpeg" controls preload="metadata" loading="lazy">
    + +

    In the example above, the audio files load as follows:

    + +
    +
    1.mp3, 2.mp3, 5.mp3
    +

    The audio file loads eagerly and delays the window's load event.

    + +
    3.mp3
    +

    The audio loads when layout is known, due to being in the viewport, however it does + not delay the window's load event.

    + +
    4.mp3
    +

    The audio loads and autoplay playback begins when layout is known, due to being in + the viewport, however it does not delay the window's load event.

    + +
    6.mp3
    +

    The audio loads only once scrolled into the viewport, and does not delay the window's + load event.

    + +
    7.mp3
    +

    The audio loads and autoplay playback begins only once scrolled into the viewport, + and does not delay the window's load event.

    + +
    8.mp3
    +

    The audio's metadata loads only once scrolled into the viewport, and does not delay + the window's load event.

    +
    +
    + + +
    audio = new Audio([ url ])
    @@ -37217,6 +37328,7 @@ interface HTMLMediaElement : HTMLElement { attribute double volume; attribute boolean muted; [CEReactions, Reflect="muted"] attribute boolean defaultMuted; + [CEReactions] attribute DOMString loading; // tracks [SameObject] readonly attribute AudioTrackList audioTracks; @@ -37228,10 +37340,47 @@ interface HTMLMediaElement : HTMLElement {

    The media element attributes, src, crossorigin, preload, autoplay, - loop, muted, and - controls, apply to all loop, muted, controls, and loading, apply to all media elements. They are defined in this section.

    +

    The loading + attribute is a lazy loading attribute. Its purpose is to indicate the policy for + loading media resources that are outside the viewport.

    + +
    +

    When the loading attribute's state is changed to the + Eager state, the user agent must run these + steps:

    + +
      +

    1. Let resumptionSteps be the media element's lazy load + resumption steps.

      2. + +

    2. If resumptionSteps is null, then return.

      3. + +

    3. Set the media element's lazy load resumption steps to null.

      4. + +

    4. Invoke resumptionSteps.

      5. +
    +
    + +
    +

    The loading + IDL attribute must reflect the loading + content attribute, limited to only known values.

    +
    + +

    When the loading attribute is in the Lazy state, it takes precedence over the preload attribute by deferring data fetching.

    + +

    If the autoplay attribute is present and the loading attribute is in the Lazy state, the user agent must also defer starting + playback (and any associated network requests autoplay can introduce) until the element's + lazy load resumption steps are invoked.

    + Scott Miles, Scott O'Hara, Sean B. Palmer,