マウスが乗るまで画像がよみこまないので、
画像を先に読み込ませるためのものを入力したところ
safariでは希望通りに動いたのですが、
firefoxでは入力前と全く変わりません。
何か間違っているのか、教えてください。
お願いします！
以下がcssに入力したものです。
#image-preload{
width: 0px;
height: 0px;
display: inline;
background-image:url('images/home_04.jpg');
}
以下がhtmlに入力したものです。
<div id="image-preload"></div>
投稿日時 - 2008-09-09 09:51:48
2人が「このQ&Aが役に立った」と投票しています
回答（3件中 1～3件目)
拝見しました…仕組みはわかりましたが、あくまで個人的意見ですが、ロールオーバー用画像のプリロードの為だけに無意味なマークアップをしている事も含め、CSSの用法としてはちょっと邪道な感じがします。こういう事をするぐらいだったらJavaScriptでプリロードさせておくか、複数の背景画像の差し替えではなく同一画像にして位置をずらして表示させる手法の方がまだ理にかなっている気がしますが…
ところで、ちょっとググっていたらこの方法を試された方の記事がありました。
http://www.orenoi.com/?blogid=1&archive=2006-09
（2006 September 08,Friday の記事です）
…だそうですが、同じ事をなさっていたりはしませんか？（ソースを見る限りは、一つの背景画像しか指定していない様ですが）。
いずれにせよ、「safariでは希望通りに動いたのですが、firefoxでは入力前と全く変わりません。」というのであれば、Firefoxでは上記の様なCSSによる記述ではプリロードの効果を果たせない仕様なのだと思われます。少なくともこの方法を使うという前提では、CSSの指定をどうこうすれば各ブラウザへの対応状況が解決できる、という事にはならないのでは…
投稿日時 - 2008-09-09 14:04:28
ちょっと状況がよくわからないのですが…「マウスが乗るまで画像がよみこまないので、画像を先に読み込ませるためのもの」と仰っていますが、CSSは「プリロード」「先に読み込ませる」という機能を管轄するものではありませんが？
質問者様の意図されている事の全体像が見えないのですが、単純に、提供されたCSSとHTMLのソースだけを見ると、いくつかのおかしな点があります。
#image-preloadのスタイルを"width: 0px; height: 0px;"としていますが、これだと幅も高さも0の為、同時に指定している背景"background-image:url('images/home_04.jpg');"は全く表示されない事になります。また、併せて"display: inline;"も指定していますが、インライン要素にしてしまうと幅や高さは指定できません。矛盾しています。
何をなさりたいのでしょうか？
投稿日時 - 2008-09-09 11:11:49
補足
http://phpspot.org/blog/archives/2006/04/css_2.html
このページをみて、この文章をhtmlとcssに追加してみたのですが、
firefoxでは上手く動かないんです、、
投稿日時 - 2008-09-09 13:18:57
