Using only css we can efficiently preload images. from : https://perishablepress.com/pure-css-better-image-preloading-without-javascript/
Pure CSS: Better Image Preloading without JavaScript After reading my previous article on preloading images without JavaScript 1, Nanda pointed out that adding extra markup to preload images is not the best approach, especially where Web Standards are concerned. Mobile devices, for example, may experience problems when dealing with the following preloading technique:
/* ADD THIS TO CSS */ div#preloaded-images { position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px; }
Let’s say you have three images (e.g., image_01.png, image_02.png, and image_03.png) that you would like to preload using this method. First, examine your markup for three identifiable
div#wrap { background: url(image_01.png) no-repeat -9999px -9999px; } div#jump { background: url(image_02.png) no-repeat -9999px -9999px; } div#header { background: url(image_03.png) no-repeat -9999px -9999px; } Here, we are preloading each image into its own unique
Of course, once you have implemented this code to preload your images, they will be immediately available (depending on size) for display in your document as needed. Simply refer to them as normal using whatever CSS code that you would normally use. For example, once these images have preloaded, I could employ the following :hover technique with minimal presentational delay:
a#first:hover { background: url(image_01.png) no-repeat 50% 50%; } a#second:hover { background: url(image_02.png) no-repeat 50% 50%; } a#third:hover { background: url(image_03.png) no-repeat 50% 50%; } According to my tests, this technique works well in any browser (including IE 6) that supports the CSS background property. Best of all, this preloading method is entirely unobtrusive, requiring no presentational code and degrading gracefully in non-supportive browsers.
/* ADD THIS TO CSS */
<style>
div#preloaded-images {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
</style>
<!-- ADD THIS TO XHTML -->
<div id="preloaded-images">
<img src="https://perishablepress.com/image-01.png" width="1" height="1" alt="Image 01" />
<img src="https://perishablepress.com/image-02.png" width="1" height="1" alt="Image 02" />
<img src="https://perishablepress.com/image-03.png" width="1" height="1" alt="Image 03" />
</div>