Jason Knight
1 min readOct 25, 2021

--

Sadly the JavaScript approaches tend to be broken junk from an accessibility standpoint. Sorry, but that's the truth of it. Why? Because for users who have scripting blocked/disabled, they only get your placeholder.

If accessibility matters, scripting only solutions are trash. Remember Baidu and Yandex will tell your scripting to go suck and egg so you're killing search in addition to users who either don't want, or don't have control of if they have JavaScript. (again why SPA are also broken garbage for accessibility, SEO, etc, etc)

That said, not sure what you mean by "fetches images well in advance" as that's not a behavior I've seen. The only negative behavior I'm aware of is if something like FF preserves the fact that you're scrolled down the page, it'll load all the images ABOVE your current scroll. This seems to be a browser specific behavior since Chrome-likes don't preserve your scroll if you reload the page.

Also the "no way to customize an image" is also false. If the image is opaque, just set background-image and the dimensions/aspect ratio ahead of time. Otherwise APO a span over the image using JS, then use the "load" event to remove it. Loading="lazy" images WILL trigger the load event when the browser displays them.

In fact, that event firing and looking at the waterfall is why that "fetches images well in advance" claim seems like complete malarkey.

Here, try mine...

https://levelup.gitconnected.com/enhancing-html-5-lazy-loading-with-css-and-minimal-javascript-afe274088f0b

--

--

Jason Knight
Jason Knight

Written by Jason Knight

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse

Responses (1)