css background-image callback without using img element

Question

I'm working on a variety of really low-powered devices and would like to switch to background-image for a variety of reasons instead of using an actual img tag. One issue that seems to prevent me from doing this is there is no callback associated with an background-image loading or not, which is critical (since failure happens on these devices).

I've seen a lot of recommendations to use an image tag's callback to check the resource then delete the resource, but may not be robust enough for me. For example, if the platform doesn't support caching, that could create two network requests/downloads for the same image. Furthermore, there's always the chance that the image loads successfully for the image, but fails for the background-image.

Is there a separate callback I could attach to something like a div using addEventListener to monitor the its network-based CSS requests? Or if not a callback, at least verify the background image has in fact loaded?

<style>
.class {
  background-image: url('./static/example.jpg');
}
</style>
<div class="foo"></div>

function onSuccess() { // this called if ./static/example.jpg loaded
}

function onFailure() { // this called if ./static/example.jpg failed to load
}

@CodeToad That will not work. What that code does is it collects all the elements with image-based CSS attributes and makes a corresponding img tag that it listens to (as others have suggested). This assumes perfect caching, which may not be available, and may make another network request. What if the image callback succeeds, but a network request fails for the actual CSS object? Or vice versa. — voodoogiant
– voodoogiant, Commented Jan 16, 2014 at 23:03
If the worse comes, you can just add a <img> tag with display: none then use imageLoaded (desandro.github.io/imagesloaded). However this is just a workaround. — tyteen4a03
– tyteen4a03, Commented Jan 16, 2014 at 23:09
@tyteen4a03 Yeah, I've tried that and while that works sometimes, I can't guarantee that works everytime on platforms that have poor or no caching. What if I make the tag, the image loads, and I set the background-url and it doesn't load for that one? Programmatically it looks like everything is fine, except the background-image never loads. — voodoogiant
– voodoogiant, Commented Jan 16, 2014 at 23:43

SkyOut · Accepted Answer · 2014-01-17 16:36:30Z

1

Would it be possible for you to load the image with JS, and if it loaded then apply the class to element.

Something like this:

var img = new Image();
img.onload = function() {
    // add class
}
img.src = '/images/myImage.jpg';

The idea would be to have JS make the call for the image and then once the browser has it in the cache then apply the class and it should load.

answered Jan 17, 2014 at 16:36

SkyOut

3901 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

css background-image callback without using img element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related