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
console.log(myImage.complete);

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.

Source