CSSとdivを使った画像先読みテクニック
2009年01月23日-
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属性には先読みさせたい画像URLを指定
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
なるほど、こうすることでも読み込ませることが出来ますね。
関連エントリ
最新のブログ記事(新着順)
- Three.jsでパーティクルが雨のように降り注ぐ実装デモ
- ホバーで文字がバラバラと集まるエフェクト実装
- ClipPathを使ったオシャレな画面切り替えスライドショー実装
- テキストをSVGを使って円形アニメーションさせるデモ
- Three.jsをつかった3Dなローディングアニメーション実装
- ホバー時にCSSで下線などをアニメーション表示するサンプル
- iPhone, iPad, Mac, Android などのフリーのベクターモックアップ
- macOS用の使いやすいカラーピッカー「pika」
- CSSでボタンにサイバーパンク効果を与えるサンプル
- カラフルな球体をWEB上でうごかすThree.jsをつかったサンプル
- 過去のエントリ