Загрузка изображений, чтобы показать их в автономном режиме

Question

Я создал веб-приложение, которое управляет автономным состоянием, если пользователь теряет свое соединение. Для этого я показываю информацию/сообщение об ошибках/... пользователю, чтобы сообщить об автономном состоянии.

Моя проблема заключается в том, что некоторые иконки или изображения в сообщениях предупреждения не показаны, так как они загружаются, когда пользователь уже потерял связь ... Изображений в CSS не в HTML:

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

Как я могу предварительно загрузить изображения/значки на странице, чтобы использовать их в автономном режиме?

NB: Я не могу использовать в автономном режиме HTML5 (манифеста), потому что мои целевые пользователи находятся на IE9 (html5 манифест не поддерживается) и по личным причинам я не могу использовать спрайты ...

Спасибо для вашей помощи

Answer 1

Ok, Я нашел способ загрузить изображение в автономном режиме. Поскольку CSS полностью загружен в любом случае, если я помещаю изображение в CSS как строку base64, для его отображения не потребуется подключение.

Вот Exemple

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

Answer 2

Что вы можете сделать, это присвоить необходимые изображения как background-image элементам, которые присутствуют на странице. Как заголовки или боковые панели (если у них нет изображений в качестве фона, конечно).

Хитрость будет заключаться в том, чтобы установить background-repeat на no-repeat и background-position на -999em -999em. Таким образом, изображения будут загружаться, но визуально скрыты.