diff --git a/files/en-us/web/html/reference/elements/audio/index.md b/files/en-us/web/html/reference/elements/audio/index.md index 00c9ad5a829d04b..3aa31182a564b77 100644 --- a/files/en-us/web/html/reference/elements/audio/index.md +++ b/files/en-us/web/html/reference/elements/audio/index.md @@ -44,7 +44,7 @@ This element's attributes include the [global attributes](/en-US/docs/Web/HTML/R > See our [autoplay guide](/en-US/docs/Web/Media/Guides/Autoplay) for additional information about how to properly use autoplay. > [!NOTE] - > Audio with the [`loading="lazy"`](#loading) attribute set will not start downloading and autoplaying until the element is near or within the viewport. + > Audio with the [`loading="lazy"`](#loading) attribute set will not start downloading and autoplaying until the controls for the media are near or within the viewport. Lazy-loaded audio without the `controls` attribute will not autoplay. - `controls` - : If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback. @@ -73,16 +73,19 @@ This element's attributes include the [global attributes](/en-US/docs/Web/HTML/R - `eager` - : Loads the audio immediately, regardless of whether or not the audio is currently within the visible viewport (this is the default value). - `lazy` - - : Defers loading the audio until it reaches a calculated distance from the viewport, as defined by the browser. + - : Defers loading the audio until the controls reach a calculated distance from the viewport, as defined by the browser. + + > [!NOTE] + > In order for audio elements to intersect visibly with the viewport, they need to be visible. Browsers use the `controls` attribute to make audio elements visible, so it's needed for lazy loading. Lazy-loaded audio without the `controls` attribute will not load. Lazy loading avoids the network and storage bandwidth required to handle the audio until it's reasonably certain that it will be needed. This improves the performance in most typical use cases. - Lazy-loaded audio located in the visual viewport may not yet be downloaded when the Window {{domxref("Window.load_event", "load")}} event is fired. This is because the event is fired based on eager-loaded audio only — lazy-loaded audio is not considered even if it is located within the visual viewport upon initial page load. + Lazy-loaded audio located in the visual viewport may not yet be downloaded when the Window {{domxref("Window.load_event", "load")}} event is fired. This is because the event is fired based on eager-loaded audio only — lazy-loaded audio is not considered even if it is located within the visual viewport upon initial page load. - Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing audio in a page's markup such that a server can track how many audio are requested and when. + Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing audio in a page's markup such that a server can track how many audio requests are made and when. - > [!NOTE] - > The `loading="lazy"` attribute also impacts the [`autoplay`](#autoplay) attribute as described in that section of this page. + > [!NOTE] + > The `loading="lazy"` attribute also impacts the [`autoplay`](#autoplay) attribute as described in that section of this page. - `loop` - : A Boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio. @@ -99,6 +102,7 @@ This element's attributes include the [global attributes](/en-US/docs/Web/HTML/R > [!NOTE] > + > - Audio with the [`loading="lazy"`](#loading) attribute set will only apply the `preload` behavior once the audio controls are near or within the viewport. > - The `autoplay` attribute has precedence over `preload`. If `autoplay` is specified, the browser would obviously need to start downloading the audio for playback. > - The browser is not forced by the specification to follow the value of this attribute; it is a mere hint. diff --git a/files/en-us/web/html/reference/elements/iframe/index.md b/files/en-us/web/html/reference/elements/iframe/index.md index 85bd70288ae53ac..68d10d4fd9604ed 100644 --- a/files/en-us/web/html/reference/elements/iframe/index.md +++ b/files/en-us/web/html/reference/elements/iframe/index.md @@ -76,9 +76,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo The intent is to avoid using the network and storage bandwidth required to fetch the frame until the browser is reasonably certain that it will be needed. This improves the performance and cost in most typical use cases, in particular by reducing initial page load times. - > [!NOTE] - > Loading is only deferred when JavaScript is enabled. - > This is an anti-tracking measure. + Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing iframes in a page's markup such that a server can track how many iframes are requested and when. - `name` - : A targetable name for the embedded browsing context. This can be used in the `target` attribute of the {{HTMLElement("a")}}, {{HTMLElement("form")}}, or {{HTMLElement("base")}} elements; the `formtarget` attribute of the {{HTMLElement("input")}} or {{HTMLElement("button")}} elements; or the `windowName` parameter in the {{domxref("Window.open()","window.open()")}} method. In addition, the name becomes a property of the {{domxref("Window")}} and {{domxref("Document")}} objects, containing a reference to the embedded window or the element itself. diff --git a/files/en-us/web/html/reference/elements/img/index.md b/files/en-us/web/html/reference/elements/img/index.md index 94a35808ec551e3..7c5bcdef810923f 100644 --- a/files/en-us/web/html/reference/elements/img/index.md +++ b/files/en-us/web/html/reference/elements/img/index.md @@ -177,11 +177,11 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo Lazy loading avoids the network and storage bandwidth required to handle the image until it's reasonably certain that it will be needed. This improves the performance in most typical use cases. - While explicit [`width`](#width) and [`height`](#height) attributes are recommended for all images to avoid layout shift, they are especially important for lazy-loaded ones. Lazy-loaded images will never be loaded if they do not intersect a visible part of an element, even if loading them would change that, because unloaded images have a `width` and `height` of `0`. It creates an even more disruptive user experience when the content visible in the viewport reflows in the middle of reading it. + While explicit [`width`](#width) and [`height`](#height) attributes are recommended for all images to avoid layout shift, they are especially important for lazy-loaded ones. Lazy-loaded images will never be loaded if they do not intersect a visible part of an element, even if loading them would change that, because unloaded images have a `width` and `height` of `0`. It creates an even more disruptive user experience when the content visible in the viewport reflows in the middle of reading it. - Lazy-loaded images located in the visual viewport may not yet be visible when the Window {{domxref("Window.load_event", "load")}} event is fired. This is because the event is fired based on eager-loaded images — lazy-loaded images are not considered even if they are located within the visual viewport upon initial page load. + Lazy-loaded images located in the visual viewport may not yet be visible when the Window {{domxref("Window.load_event", "load")}} event is fired. This is because the event is fired based on eager-loaded images — lazy-loaded images are not considered even if they are located within the visual viewport upon initial page load. - Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can track how many images are requested and when. + Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can track how many images are requested and when. - `referrerpolicy` - : A string indicating which referrer to use when fetching the resource: diff --git a/files/en-us/web/html/reference/elements/video/index.md b/files/en-us/web/html/reference/elements/video/index.md index 19ef772d8c4a5f1..706182f13ef2912 100644 --- a/files/en-us/web/html/reference/elements/video/index.md +++ b/files/en-us/web/html/reference/elements/video/index.md @@ -80,14 +80,14 @@ Like all other HTML elements, this element supports the [global attributes](/en- Lazy loading avoids the network and storage bandwidth required to handle the video until it's reasonably certain that it will be needed. This improves the performance in most typical use cases. - While explicit [`width`](#width) and [`height`](#height) attributes are recommended for all videos to avoid layout shift, they are especially important for lazy-loaded ones. Lazy-loaded videos will never be loaded if they do not intersect a visible part of an element, even if loading them would change that, because unloaded videos have a `width` and `height` of `0`. It creates an even more disruptive user experience when the content visible in the viewport reflows in the middle of reading it. + While explicit [`width`](#width) and [`height`](#height) attributes are recommended for all videos to avoid layout shift, they are especially important for lazy-loaded ones. Lazy-loaded videos will never be loaded if they do not intersect a visible part of an element, even if loading them would change that, because unloaded videos have a `width` and `height` of `0`. It creates an even more disruptive user experience when the content visible in the viewport reflows in the middle of reading it. - Lazy-loaded videos located in the visual viewport may not yet be visible when the Window {{domxref("Window.load_event", "load")}} event is fired. This is because the event is fired based on eager-loaded videos — lazy-loaded videos are not considered even if they are located within the visual viewport upon initial page load. + Lazy-loaded videos located in the visual viewport may not yet be visible when the Window {{domxref("Window.load_event", "load")}} event is fired. This is because the event is fired based on eager-loaded videos — lazy-loaded videos are not considered even if they are located within the visual viewport upon initial page load. - Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing videos in a page's markup such that a server can track how many videos are requested and when. + Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing videos in a page's markup such that a server can track how many videos are requested and when. - > [!NOTE] - > The `loading="lazy"` attribute also impacts the [`autoplay`](#autoplay), [`poster`](#poster), and [`preload`](#preload) attributes, as described in each of those sections of the page. + > [!NOTE] + > The `loading="lazy"` attribute also impacts the [`autoplay`](#autoplay), [`poster`](#poster), and [`preload`](#preload) attributes, as described in each of those sections of the page. - `loop` - : A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video. @@ -115,12 +115,10 @@ Like all other HTML elements, this element supports the [global attributes](/en- > [!NOTE] > + > - Videos with the [`loading="lazy"`](#loading) attribute set will only apply the `preload` behavior once the video is near or within the viewport. > - The `autoplay` attribute has precedence over `preload`. If `autoplay` is specified, the browser would obviously need to start downloading the video for playback. > - The specification does not force the browser to follow the value of this attribute; it is a mere hint. - > [!NOTE] - > Videos with the [`loading="lazy"`](#loading) attribute set will only apply the `preload` behavior once the video is near or within the viewport. - - `src` - : The URL of the video to embed. This is optional; you may instead use the {{HTMLElement("source")}} element within the video block to specify the video to embed. - `width`