Question

Is it possible I can load an image sprite only when needed?

For example I have a settings panel with different images which are all combined in to 1 sprite image. Can I load that image when the settings panel is viewed?

$('#settings').click(function() {

    // Javascript Loading sprite goes here?

});

I assume I will be using jquery .css attribute aswell to add the background-image so that the sprite it is not assigned in the CSS in order to load with the CSS? (Correct me if I’m wrong).

I’d like not to use a plugin such as Lazy load to increase the size of my App rather a simple jQuery or pure javascript code.

Thanks alot

Answer 1

In general, the browser will only request CSS images when they’re actually displayed.
You don’t need to do anything.