From 1858de467c276eb8446895a755857e97ab22d4d5 Mon Sep 17 00:00:00 2001
From: Dominic Farolino
A lazy loading attribute is an enumerated attribute. The following + table lists the keywords and states for the attribute — the keywords in the left column map + to the states in the cell in the second column on the same row as the keyword.
+ +The attribute directs the user agent to fetch a resource immediately or to defer fetching until + some conditions associated with the element are met, according to the attribute's current + state.
+ +Keyword + | State + | Description + |
---|---|---|
lazy
+ | Lazy + | Used to defer fetching a resource until some conditions are met. + |
eager
+ | Eager + | Used to fetch a resource immediately; the default state. + |
The attribute's missing value default and invalid value default are both the Eager state.
+ + +With this feature, it is possible for a site to track a user's approximate scroll position + throughout a session, even when scripting is disabled, by strategically placing images in a + page's markup such that a server can track how many images are requested and when. To mitigate + this, user agents should not honor the lazy loading attribute when scripting is + disabled. + +
+height
referrerpolicy
decoding
loading
alt
attribute: HTMLImageElement : HTMLElement {
readonly attribute USVString currentSrc;
[CEReactions] attribute DOMString referrerPolicy;
[CEReactions] attribute DOMString decoding;
+ [CEReactions] attribute DOMString loading;
Promise<void> decode();
};
@@ -26443,6 +26485,42 @@ interface HTMLImageElement : HTMLElement {
default">missing value default and invalid value
default are both the auto state.
+ The loading
attribute is a lazy
+ loading attribute. Its purpose is to indicate the policy for loading images that are
+ outside the viewport.
<img src="1.jpeg" alt="1">
+<img src="2.jpeg" loading=eager alt="2">
+<img src="3.jpeg" loading=lazy alt="3">
+<div id=very-large></div> <!-- Everything after this div is below the viewport -->
+<img src="4.jpeg" alt="4">
+<img src="5.jpeg" loading=lazy alt="5">
+
+ In the example above, the images load as follows:
+ +1.jpeg
, 2.jpeg
,
+ 4.jpeg
The images load eagerly and delay the window's load event.
3.jpeg
The image loads when layout is known, due to being in the viewport, however it does not + delay the window's load event.
5.jpeg
The image loads only once scrolled into the viewport, and does not delay the window's + load event.
Developers are encouraged to specify an intrinsic aspect ratio via width
and height
attributes
+ on lazy loaded images, even if CSS sets the image's width and height properties, to prevent the
+ page layout from shifting around after the image loads.
The img
element must not be used as a layout tool. In particular, img
@@ -26633,6 +26711,10 @@ interface HTMLImageElement : HTMLElement {
reflect the decoding
content
attribute, limited to only known values.
+
The loading
IDL attribute must
+ reflect the loading
content
+ attribute, limited to only known values.
+
The will lazy load image steps, given an img
element img,
+ are as follows:
If img's lazy loading attribute is in the Lazy state, and img does not intersect + the viewport, return true.
+ +For improved user experience, user agents might also consider intersections with + an area larger than the viewport, so that the image can begin loading before it appears in the + viewport.
+Return false.
This algorithm cannot be called from steps running in parallel. If + a user agent needs to call this algorithm from steps running in parallel, it needs to + queue a task to do so.
+When the user agent is to update the image data of an img
element,
optionally with the restart animations flag set,
it must run the following steps:
Await a stable state, allowing the task that invoked this algorithm to continue. - The synchronous - section consists of all the remaining steps of this algorithm until the algorithm says the - synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)
Queue a microtask to perform the rest of this algorithm, allowing the task that invoked this algorithm to continue.
⌛ If another instance of this algorithm for this img
element was started
- after this instance (even if it aborted and is no longer running), then return.
If another instance of this algorithm for this img
element was started after
+ this instance (even if it aborted and is no longer running), then return.
Only the last instance takes effect, to avoid multiple requests when, for
example, the src
, srcset
,
@@ -28141,22 +28241,22 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
⌛ Let selected source and selected pixel density be the URL - and pixel density that results from selecting an image - source, respectively.
Let selected source and selected pixel density be the URL and pixel + density that results from selecting an image source, + respectively.
⌛ If selected source is null, then:
+If selected source is null, then:
⌛ Set the current request's state to broken, abort the - image request for the current request and the pending request, - and set pending request to null.
Set the current request's state to + broken, abort the image request for the + current request and the pending request, and set pending + request to null.
⌛ Queue an element task on the DOM manipulation task
- source given the img
element and the following steps:
Queue an element task on the DOM manipulation task source given
+ the img
element and the following steps:
Change the current request's current @@ -28169,26 +28269,26 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
⌛ Return.
Return.
⌛ Parse selected source, relative to the
- element's node document, and let urlString be the resulting URL
+ Parse selected source, relative to the element's
+ node document, and let urlString be the resulting URL
string. If that is not successful, then: ⌛ Abort the image request for the current request and
- the pending request. Abort the image request for the current request and the
+ pending request. ⌛ Set the current request's state to broken. Set the current request's state to
+ broken. ⌛ Set pending request to null. Set pending request to null. ⌛ Queue an element task on the DOM manipulation task
+ Queue an element task on the DOM manipulation task
source given the ⌛ Return. Return.
-
img
element and the following steps:
@@ -28200,62 +28300,82 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
⌛ If the pending request is not null and urlString is the - same as the pending request's current URL, then +
If the pending request is not null and urlString is the same as + the pending request's current URL, then return.
⌛ If urlString is the same as the current request's If urlString is the same as the current request's current URL and current request's state is partially available, then
abort the image request for the pending request, queue a
task to restart the animation if restart animation is set, and
return.
⌛ If the pending request is not null, then abort the image - request for the pending request.
If the pending request is not null, then abort the image request + for the pending request.
⌛ Set image request to a new image request whose Set image request to a new image request whose current URL is urlString.
⌛ If current request's state is
- unavailable or broken, then set
- the current request to image request. Otherwise, set the pending
+ If current request's state is unavailable or broken, then set the
+ current request to image request. Otherwise, set the pending
request to image request. ⌛ Let request be the result of creating a potential-CORS request given urlString, " ⌛ Set request's client to
- the element's node document's relevant settings object. Set request's client to the
+ element's node document's relevant settings object. ⌛ If the element uses If the element uses ⌛ Set request's referrer
+ Set request's referrer
policy to the current state of the element's Let delay load event be true if the If the will lazy load image steps given the Continue running this algorithm in parallel. Wait until the will lazy load image steps no longer return true, given the
+ Queue a task to continue running the rest of this algorithm. ⌛ Fetch request. Let this instance of
- the fetching algorithm be associated with image
- request. Fetch request. Let this instance of the fetching algorithm be associated with image request.
+ The resource obtained in this fashion, if any, is image request's image data.
- It can be either CORS-same-origin or CORS-cross-origin; this affects
- the origin of the image itself (e.g. when used on a The resource obtained in this fashion, if any, is image request's image data. It can be either CORS-same-origin or
+ CORS-cross-origin; this affects the origin of the image itself (e.g.
+ when used on a Fetching the image must delay the load event of the element's node document until the
- task that is queued by the
+ When delay load event is true, fetching the image must delay the load
+ event of the element's node document until the task that is queued by the
networking task source once the resource has been fetched (defined below) has been run.
End the synchronous section, continuing the remaining steps in
- parallel, but without missing any data from fetching. Continue the remaining steps in parallel, but without missing any data from
+ fetching. The default object size is a width of 300 CSS pixels
and a height of 150 CSS pixels. A User agents should provide controls to enable or disable the display of closed captions, audio
@@ -114452,6 +114568,9 @@ console.assert(container.firstChild instanceof SuperP);
means the element is not being rendered, though this might be overridden by the style
sheets. An element is said to intersect the viewport when it is being rendered
+ and its associated CSS layout box intersects the viewport. User agents that do not honor author-level CSS style sheets are nonetheless expected to act as
@@ -121985,6 +122104,12 @@ interface External {
With this feature, it is possible for a site to track a user's approximate scroll position
throughout a session, even when scripting is disabled, by strategically placing images in a
page's markup such that a server can track how many images are requested and when. To mitigate
From 0a1823059fe9f02363036e525de41109dfb91ebf Mon Sep 17 00:00:00 2001
From: Anne van Kesteren With this feature, it is possible for a site to track a user's approximate scroll position
- throughout a session, even when scripting is disabled, by strategically placing images in a
- page's markup such that a server can track how many images are requested and when. To mitigate
- this, user agents should not honor the lazy loading attribute when scripting is
- disabled.
+
- image
", and the current state of the element's crossorigin
content attribute.srcset
or
+ srcset
or
picture
, set request's initiator to "imageset
".referrerpolicy
attribute.img
's lazy loading
+ attribute is in the Eager state, and false
+ otherwise.img
return true, then
+ run these steps:
+
+ img
.canvas
).canvas
).video
element is said to intersect the viewport when it is
- being rendered and its associated CSS layout box intersects the
- viewport.
" sync
";
"async
";
"auto
"
+
+ loading
+ img
+ Used when determining loading deferral
+ " lazy
";
+ "eager
"
From 4ffdbd85f950744dc0be4a1985cdaf43d8c9f9dd Mon Sep 17 00:00:00 2001
From: Anne van Kesteren default
+ track
From 304f9bae53a9fb9261ea1c4b5af68fc402468e67 Mon Sep 17 00:00:00 2001
From: Dominic Farolino alt
;
src
;
srcset
;
+ sizes
;
crossorigin
;
usemap
;
ismap
;
width
;
height
;
+ referrerpolicy
;
decoding
;
- referrerpolicy
loading
HTMLImageElement
Common DOM interfaces
@@ -26489,7 +26488,6 @@ interface HTMLImageElement : HTMLElement {
outside the viewport.
<img src="1.jpeg" alt="1"> <img src="2.jpeg" loading=eager alt="2"> <img src="3.jpeg" loading=lazy alt="3"> @@ -26517,7 +26515,6 @@ interface HTMLImageElement : HTMLElement { data-x="attr-dim-width">width
andheight
attributes on lazy loaded images, even if CSS sets the image's width and height properties, to prevent the page layout from shifting around after the image loads. -
The decoding
IDL attribute must
reflect the decoding
content
- attribute, limited to only known values.
+ attribute, limited to only known values.
The loading
IDL attribute must
- reflect the loading
content
- attribute, limited to only known values.
+ reflect the loading
content attribute,
+ limited to only known values.
If the will lazy load image steps given the img
return true, then
- run these steps:
If the will lazy load image steps given the img
return true,
+ then:
Continue running this algorithm in parallel.
The user agent may run the following substeps:
-This specification doesn't define the precise timing for when the intersection - is tested, but it is suggested that the timing match that of the Intersection Observer API. -
-paused
attribute to false.autoplay
attribute is still specified,
run the following substeps:
- This specification doesn't define the precise timing for when the intersection - is tested, but it is suggested that the timing match that of the Intersection Observer API. -
-An element is said to intersect the viewport when it is being rendered and its associated CSS layout box intersects the viewport.
+This specification does not define the precise timing for when the intersection is + tested, but it is suggested that the timing match that of the Intersection Observer API.
+User agents that do not honor author-level CSS style sheets are nonetheless expected to act as
From 27d5aca8d463a9c0b15d5e3614fcf084abf78a84 Mon Sep 17 00:00:00 2001
From: Anne van Kesteren If img's lazy loading attribute is in the Lazy state, and img does not intersect
- the viewport, return true.
For improved user experience, user agents might also consider intersections with - an area larger than the viewport, so that the image can begin loading before it appears in the - viewport.
+This allows for fetching the image during scrolling, when it does not, but is + about to intersect the viewport.
Return false.
- - With this feature, it is possible for a site to track a user's approximate scroll position - throughout a session, even when scripting is disabled, by strategically placing images in a page's - markup such that a server can track how many images are requested and when. To mitigate this, user - agents should not honor the lazy loading attribute when scripting is disabled.
-If scripting is disabled for img, return + false.
+ +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.
+If img's lazy loading attribute is in the Lazy state, img does not intersect the @@ -28340,8 +28343,9 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...referrerpolicy attribute.
Let delay load event be true if the img
's lazy loading
- attribute is in the Eager state, and false
- otherwise.
img
, and
+ false otherwise.If the will lazy load image steps given the img
return true,
From 8bac3c8f926d51cbc24767a1f2b0d044e1d806b8 Mon Sep 17 00:00:00 2001
From: Anne van Kesteren
Queue a microtask to perform the rest of this algorithm, allowing the task that invoked this algorithm to continue.