CSSだけで画像をプリロードするテクニック
2006年04月27日-
So you need to pre-load images, but don’t want to deal with javascript or complicated workarounds. What do you do? The solution is simple. All we need to do is designate a CSS style with multiple background-images. As your browser reads the style, it will load each image you designate in succession, thus pre-loading your images. Below is an example of the CSS:
JavaScriptなしに、CSSだけで画像をブラウザにプリロードさせるテクニック。
まず、次のようなCSSを定義します。
#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png); /* 読ませたいイメージ1 */
background-image: url(path/to/image2.png); /* 読ませたいイメージ2 */
background-image: url(path/to/image3.png); /* 読ませたいイメージ3 */
background-image: url(path/to/image4.png); /* 読ませたいイメージ4 */
}
そして、次のようなタグをHTMLに記述しておく。
<div id="preloadedImages">< /div>
これだけでOK。
なるほど、divを読み込んだ時点でブラウザが画像を読み込みに行ってキャッシュしてくれるわけですね。
JavaScriptで面倒なことをせずに済みます。
最新のブログ記事(新着順)
- ホバー時にCSSで下線などをアニメーション表示するサンプル
- iPhone, iPad, Mac, Android などのフリーのベクターモックアップ
- macOS用の使いやすいカラーピッカー「pika」
- CSSでボタンにサイバーパンク効果を与えるサンプル
- カラフルな球体をWEB上でうごかすThree.jsをつかったサンプル
- ダークモード対応のミニマルなHTMLページを作れるCSS「spcss」
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- 過去のエントリ