loading images to show them offline

Question

I've made a web application that manages the offline state if the user loses their connection. For this, I show information/error/... messages to the user to inform about the offline state.

My problem is that some icons or images in the warning messages are not shown because they are loaded when the user already has lost the connection... The images are in the CSS not in the html :

.warning
{
background: #FFE680 url(../images/ico_warning.png) no-repeat 10px center / 18px;
}

How can I preload the images/icons at the page construction to use them offline ?

N.B : I can't use the HTML5 offline functionality (manifest) because my targeted users are on IE9 (html5 manifest is not supported) and for personal reasons I can't use sprites...

Thanks for your help

Answer 1

Ok, I found a way to load the image offline. Because the CSS is fully loaded in any case, if I put the image in the CSS as a base64 string, it won't need a connection to show it.

Here is an exemple

.warning{
background: #FFE680 url('data:image/png;base64,iVBORw0KGgoAA_complete_base64_string_here...') no-repeat 10px center / 18px;
}