0 Image Caching with CSS

we begin by segregating our strategy to target different media types. For example, for web pages featuring both screen and print stylesheets, we treat each separately by writing this:

@media screen {}
@media print {}

Then, to ensure that the images are preloaded in all browsers, we need to avoid the use of either display:none; or visibility:hidden; in the method. Rather than risking non-caching by hiding or preventing the display of images that need preloaded, we ensure their display and position them far outside of the screen. To do this, we enclose all images that need cached within some specifically identified division like so:

<div id="preloader">
 <img src="http://domain.tld/path/images/01.png" width="1" height="1" />
 <img src="http://domain.tld/path/images/02.png" width="1" height="1" />
 <img src="http://domain.tld/path/images/03.png" width="1" height="1" />
 <img src="http://domain.tld/path/images/04.png" width="1" height="1" />
 <img src="http://domain.tld/path/images/05.png" width="1" height="1" />
 <img src="http://domain.tld/path/images/06.png" width="1" height="1" />
 <img src="http://domain.tld/path/images/07.png" width="1" height="1" />
</div>

Then, with that markup in place, we flesh out the previous media directives with the following CSS:

@media screen {
 div#preloader {
  position: absolute;
  left: -9999px;
  top:  -9999px;
  }
 div#preloader img {
  display: block;
  }
 }
@media print {
 div#preloader, 
 div#preloader img {
  visibility: hidden;
  display: none;
  }
 }

Here, we have the preloader division positioned far to the lower-left outside of the screen, and then redundantly specify block display on the image elements.

Finally, to prevent the unwanted display of these preloaded images via print media, we simply hide the images via display:none; and visibility:hidden; declarations.

When using this method to preload/cache images, remember to call the preloaded images by using the exact same path used for the original preloaded image. For caching to work, the browser must reference an existing resource via the identical path.

This method is designed to enable the caching of specified images in virtually all visual browsing devices.