A 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.
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.
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)
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.
Indicates a strong preference to defer fetching the element's resource until it will be viewable
Indicates the element's resource must be fetched immediately, regardless of viewability
Indicates that the user agent may determine the fetching strategy
The attribute's missing value default and invalid value default are both the auto.
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" />
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?