Reach Customers Online

Better Image Caching with CSS

“These caching techniques have evolved in terms of effectiveness and accuracy, but may be improved further to allow for greater cross-browser functionality. In this post, I share a “CSS-only” preloading method that works better under a broader set of conditions.

Previous image-preloading techniques target all browsers, devices, and media types. Unfortunately, certain browsers do not load images that are hidden directly (via the element) or indirectly (e.g., via the parent element) using either display:none; or visibility:hidden;. Further problematic is the potential unintentional display of images on pages when presented via specifically designed print stylesheet.”

From Perishable Press. Aside from the annoying black background with too dark text, this is an interesting technique to avoid javascript when pre-loading images.

Related Stories

Using Print Stylesheets

Hosting Multiple Versions of IE Browser

Easy Random Image Rotation with PHP

Batch Image Processing Tool

Caching With PHP Cache_Lite

View Your Web Pages in Multiple Versions of Internet Explorer Browsers

EO Study: Is this Image a Photograph?

How to Protect Your Website Images