DEV Community

Cover image for Native HTML: Lazyloading Revisited
Andrew Bone
Andrew Bone

Posted on

12 6 1

Native HTML: Lazyloading Revisited

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.

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.

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" />
Enter fullscreen mode Exit fullscreen mode

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

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay