On February 24, 2022, I learned...

About the HTMLImageElement.complete property

I learned about this Boolean JavaScript property from today’s Web Tools Weekly newsletter (which you should definitely subscribe to). Louis Lazaris offers this example:

let myImage = document.querySelector('#myImage');

// will display true or false

That’s a simple test that returns true or false based on whether the image has completed rendering. That sounds like a fantastic use case for something like displaying a placeholder image or element while the image is loading. Images often loading pretty quickly, though, so it would be less of a visual enhancement than perhaps a way to avoid nasty content jumps as images load.

Then again, there are already ways to combat content jumps and layout shifts. And we’re talking about the slowest of slow connections. Louis created a demo over at CodePen and suggests emulating a slower internet connection, say in DevTools.

Screenshot of Chrome's DevTools open to the Network settings showing the options to throttle the internet speed.
Enable “throttling” in the DevTools Network tab in Chrome.


Leave a Reply

Markdown supported