なつみかん。

アニメを見て気が向いたときに聖地巡礼しています。

CSSを使った画像プリロード

A Simple CSS Image preloading technique(Specere Blogs)より転載。
説明は不要だと思います。

CSS



#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}

HTML


<div id="preloadedImages"></div>


プリロードでこれほどスマートな記述は初めて見ました。しかも

the image will load instantly from cache.


という点も見逃せない。

以前から画像プリロードに JavaScript を使ったりとか <img src="image.gif" width="1" height="1"> のような方法には違和感を感じていたので、これは気に入りました。ul を使った横並びのメニュー※などと併用すると良いかも。


※一応書いておきます

li{
display : inline ;
}

li a {
display:block;
background-image:url(img/bg_menu.gif);
width : 50px ;
height : 20px ;
border : 1px solid #ccc ;
}

li a:hover{
background-image:url(img/bg_menu_hover.gif);
}

| WebDesign | このエントリーをはてなブックマークに追加

SEARCH

RECENT ENTRIES

RECOMMEND

B071KZC6CY
「君の名は。」Blu-rayコレクターズ・エディション 4K Ultra HD Blu-ray同梱5枚組 (初回生産限定)

RECOMMEND

4041047803
新海誠監督作品 君の名は。 公式ビジュアルガイド

RECOMMEND

457531188X
この世界の片隅に 劇場アニメ公式ガイドブック

PROFILE

LINKS

RSS & CC