Better Image Caching with CSS ? Perishable Press

CSSを使った画像先読みテクニック
CSSの中に、background-image として指定しておくことで読み込ませるような方法もありますが、<div> と position を使って実現する方法
要は、position指定した見えないdivの中に<img>を仕込んで画像を先読みさせるというものみたい。

HTML
<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" />
</div>

src属性には先読みさせたい画像ＵＲＬを指定

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

詳細な記事を閲覧：Better Image Caching with CSS ? Perishable Press

なるほど、こうすることでも読み込ませることが出来ますね。

関連エントリ

• CSSだけで画像をプリロードするテクニック