loading images to show them offline


Tags: javascript,html,css,offline

Problem :

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



Solution :

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;
}

    CSS Howto..

    How to keep responsiveness while expanding div background height in CSS?

    How to provide responsive design for svg?

    How can I make this menu's “clear:both” work in Google Chrome?

    DIV Background Image Doesn't Show in Firefox or Chrome (But only online). Online it works for IE?

    How can I get mobile safari to use the right CSS?

    How to trigger css3 rotate effect by clicking?

    how to fix a division using css and js..?

    How to read property value of a DIV which is set by a CSS class?

    How can I improve this markup and CSS to keep things simple and easy to work with?

    How to center my navigation using .css

    When using ''@keyframe play'' in css, how can you get the frame the animation is currently at with javascript?

    Div inside how to call class in css?

    How to track element movement and trigger function at specific spot?

    How can I organize my css rules?

    How to properly apply a css hack for IE11 transition misbehaviour

    How to reset css (a:visited{color:green}) when refresh browser address bar

    How to create styled boxes on a webpage in where I can add graphs,gaugs,numbers?

    How to better write complex styles to an element via javascript?

    How to define a document in javascript? WebStorm

    How to combine components in HTML header

    Only show limiited div's depending on browser width

    How to avoid a vertical dropdown menu to add the vertical scrollbar when at bottom?

    How do I properly reference files in subdirectories (in xampp) for PHP, CSS, etc. on localhost?

    How to make text box to overlap with the image?

    How to insert css arrow into html page and make it clickable

    How do you change the appearance of a button in javascript?

    how to remove the border from the last list item and select :nth-child (multiple items)

    How to change the CSS after image lazy loading (jQuery)? [closed]

    How to include css and jquery in joomla component

    How to make a website look like a Windows Office application? [closed]