Working with extremely low-powered devices has led me to consider switching to background-images instead of using img tags for various reasons. However, one major issue I've encountered is the lack of a callback associated with background-image loading or failure, which is crucial for these types of devices.
I've come across suggestions to use an image tag's callback to check and delete the resource, but this method may not be reliable enough for my needs. There is concern that without caching support, multiple network requests could be generated for the same image. Additionally, there is always the risk of successful image loading through the img tag while failing with the background-image property.
Is it possible to attach a separate callback to a div element using addEventListener to monitor its network-based CSS requests? Or if not a callback, is there a way to verify that the background image has indeed loaded?
<style>
.class {
background-image: url('./static/example.jpg');
}
</style>
<div class="foo"></div>
function onSuccess() { // called if ./static/example.jpg loads successfully
}
function onFailure() { // called if ./static/example.jpg fails to load
}