CSSのみで行うプリロード
ちょいと、PSP専用ページを作ってまして。
ボタンのオンマウス処理をしてたんですが、PSPではCSSのbackground-imageが使えないんですね。
いつも使う手法で:hover使って、background-positionの切り替えでオンマウスをCSSだけでやろうとしたらアウト!
んじゃあ、しょうがねーってことで、javascript使ってonMouseOverでやったらちゃんと動きました。
でも、仕事で作ったサイト見るとアコーディオンメニューが動かなかったので、javascriptも動かないところがあるんでしょう。
さてさて。
オンマウスで切り替わるボタン画像のプリロードをどうすっかってことで、表題にもしたCSSで画像のプリロードを行います。
やってることはすごい単純。
/* css */ #preload img{width:0;height:0;}
/* html */ <div id="preload"> <img src="aaa.jpg" /> <img src="bbb.jpg" /> <img src="ccc.jpg" /> </div>
以上。
解説すると、プリロードしたい画像をwidthもheightも0pxにして見えなくしちゃう。ただそれだけです。
そうそう。display:none;でdiv#priloadごと非表示にもしてみたんですがだめでした。
PSP実機で確認してみたけど画像の読み込みさえもしてくれないっぽいです。
たぶん、display:none;はnullってことなんですかね。だから読み込みもしてくれない。width、heightともに0なら見えないけど存在はしてるってことでOKなんでしょか。
あと、冒頭でも書いたんですが。PSPはcssのbackground-imageが効かないのでimgタグの羅列するのが、今のところの安全策なのかもしれませんな。
ってか、PSPでメモステ内のローカルファイルにアクセスするのだったらFlashで作った方が便利かも…。