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.

Native HTML: Lazyloading

Andrew Bone ・ Jan 11 '19

#html #css #lazyloading #whatwg

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

bengreenstein posted on Jun 08, 2018

@domenic

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 )

View on GitHub

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 viewable

eager
Indicates the element's resource must be fetched immediately, regardless of viewability

auto default
Indicates that the user agent may determine the fetching strategy

The 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?
❤🧠🦄🦄🧠❤🧠