How Can I Tell If a Background-Image Loaded Successfully ... AFTER The Fact?

Question

There are several Stack Overflow questions like How can I check if a background image is loaded? which are similar to mine. They attempt to run code when an element's background-image loads, and accomplish this by adding an onload handler to the element.

But what if you are running (for instance) a Puppeteer script, which checks the page after it has already loaded? In that case you can't add onload handlers.

Is there any way to verify that the background-image of an element loaded, "after the fact", without using onload?

The only way I can think of is to grab their background-image style, then fetch the image myself to see if it loads ... but that seems a lot slower than just asking the browser (somehow) if the image loaded ... especially if I'm checking a lot of background-images.

Answer 1

Puppeteer has a config for pages to check the number of idle connections. So the images should be loaded while there are no more requests than specified in 500ms.

await page.goto('https://www.google.com/', {"waitUntil" : "networkidle0"});