Andrew BoneA couple of months ago I did a post about a new exciting attribute coming to the spec that allowed native lazyloading if you'd like to read that post first you can find it here.
Why revisit this?
The proposal has changed a lot in the last 2 months a few of us agreed that lazyloading='auto|on|off' felt a little clunky and a WebKit engineer, @othermaciej, proposed a new syntax load='auto|eager|lazy', which is what the proposal suggests now.
You can read the full discussion here.
Lazyload images
#3752
This is a draft of spec changes to support a lazyload attribute in iframe and img elements.
Issue: #2806 Tests: https://chromium-review.googlesource.com/c/chromium/src/+/1417117 (wpt export)
/embedded-content.html ( diff ) /images.html ( diff ) /index.html ( diff ) /indices.html ( diff ) /media.html ( diff ) /rendering.html ( diff ) /urls-and-fetching.html ( diff )
How does the proposal stand now?
The attribute provides a hint to the user agent to aid in deciding whether to load an element immediately or to defer loading until the element will be viewable, according to the attribute's current state.
lazy
Indicates a strong preference to defer fetching the element's resource until it will be viewableeager
Indicates the element's resource must be fetched immediately, regardless of viewabilityauto default
Indicates that the user agent may determine the fetching strategyThe attribute's missing value default and invalid value default are both the auto.
How does that look practically?
I've updated my example from the previous post to reflect the new state of things.
<!--
this image will not be fetched until it
is in the viewport, meaning the page loads
faster and uses less data.
-->
<img src="https://via.placeholder.com/150" load="lazy" />
<!--
this image will be fetched as soon as the
page opens, this is how website work currently
-->
<img src="https://via.placeholder.com/150" load="eager" />
<!--
this image will probably work the same as eager
but there is space for interpretation
-->
<img src="https://via.placeholder.com/150" load="auto" />
<!--
If the load value is invalid or missing
the attribute will default auto
-->
<img src="https://via.placeholder.com/150" load="bar" />
<img src="https://via.placeholder.com/150" />
Close
The reason I felt it was important to revisit this was to show you that no matter where you are in your career you have a say in the future of the platform the people over at whatwg want to get the spec right and your unique perspective might be what they're missing. Don't be afraid to look at future specs, ask questions and make suggestions.
Thank you for reading, do you prefer this iteration of lazyloading over the last?
ā¤š§ š¦š¦š§ ā¤š§
