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; } <!– ADD THIS TO XHTML –> <div id=”preloaded-images”> <img src=”http://perishablepress.com/image-01.png” width=”1″ height=”1″ alt=”Image 01″ /> <img src=”http://perishablepress.com/image-02.png” width=”1″ height=”1″ alt=”Image 02″ /> <img src=”http://perishablepress.com/image-03.png” width=”1″ height=”1″ alt=”Image 03″ /> </div> Thus, as Nanda suggests, […] Read more »