掲示板/JavaScript質問板/過去ログ/一覧/ 画像のロード - TAG index

< HOME / 掲示板 / JavaScript質問板 / 過去ログ / 一覧 / 画像のロード

画像のロード

0 名前： こけし ： 2005/07/29 20:47: はじめまして、こけしといいます。

ウィンドウズアプリケーションのメニューのようなものをウェブページで実現させようとしています。
メニュー項目を選択したとき、スタイルシートを使ってメニュー項目の背景に画像を表示させているのですが、
まだ画像がロードできていないときは画像が表示されません。

メニュー項目がアクティブ（a:active）のときも背景に画像を表示したいので、
背景に画像を表示するのはJavaScriptではなくスタイルシートを使いたいと思います。

JavaScriptを利用して、一番最初にその背景の画像をロードすることはできるのでしょうか？

長々とすみません。

1 名前： kanasansoft ： 2005/07/29 20:47 ［URL］: はじめましてkanasansoftです。

scriptタグ内でImageオブジェクトを作成し
クライアントのメモリ(キャッシュ)上に
画像をあらかじめ読み込ませておく方法があります。

<script>
var imgDummy = new Image(80,20);
imgDummy.src = "backgroundimage.png";
</script>

読み込みのタイミングはonloadイベント前がいいかと...。

2 名前： こけし ： 2005/07/29 20:47: kanasansoftさんありがとうございます。

書いていただいたソースを自分の環境にあわせ、onloadで呼びましたが状態は変わりません。

ところで Image(80,20); の 80,20 という引数は幅と高さを意味するのでしょうか。
検索してみましたが関係ない資料が多すぎてわかりません。

3 名前： kanasansoft ： 2005/07/29 20:47 ［URL］: うろ覚えで申し訳ないですが
onloadイベントが実行される前に読み込まないとうまくいかなかったはずです。
説明不足でした。

・
・
・
<script>

</script>
</head>
<body onload="fncOnLoad();">
・
・
・

new Image();
の80は幅、20は高さです。

4 名前： こけし ： 2005/07/29 20:47: うまくいきました！

kanasansoftさん、どうもありがとうございました。

5 名前： こけし ： 2005/07/29 20:47: 先ほどはうまくいったといいましたが、
Internet Explorerではなかなか画像が表示されません。
Mozilla Firefox と Opera ではうまくいきました。

JavaScriptの設定は有効になっています。

6 名前： kanasansoft ： 2005/07/29 20:47 ［URL］: うまくいきませんでした？
(随分前になりますがこの方法を使ったことがあるんですが
バージョン違いのせいでしょうか...)

次の方法はいかがでしょう。

<img src="backgroundimage.png" style="display:none;">

cssで不可視化したイメージをbodyタグ内に記述します。

7 名前： こけし ： 2005/07/29 20:47: 実験でimgタグを使っていつごろその画像が表示するかやってみると
すぐに表示されたにも関わらず、メニューを選択したときは背景画像がかわっていません。

Internet Explorer でも一番最初に画像を読み込むのは成功しているようです。

8 名前： kanasansoft ： 2005/07/29 20:47 ［URL］: 一部でいいんでソース晒せますか？

時間があればこちらでも確認したいんで...。

結果は明日になると思います。

9 名前： こけし ： 2005/07/29 20:47: ソース：
<div class="menu">
<a href="Sample.html">Sample</a>
</div>

スタイルシート：
.menu a
{
display: block;
color: black;
border: 1px #FFFFFF solid;
padding: 3px;
}
.menu a:hover
{
background-image: url('images/background1.png');
color: black;
text-decoration: none;
border: 1px #316AC5 solid;
}
.menu a:active
{
background-image: url('images/background2.png');
color: black;
border: 1px #666666 solid;
}

お願いします。

10 名前： kanasansoft ： 2005/07/29 20:47 ［URL］: 実験してみてなんとなくわかったような気がします。

初期表示にしようされる
「.menu a」もしくは「.menu a:link」どちらにも
「background-image」の指定がないことが原因のようです。

つまり、初期表示に「background-image」が用いられなかった場合、
以降「a:active」や「a:hover」で「background-image」が指定されていたとしても
無視されるようです。
今回は背景色が黒ですので、黒い画像を指定するか、透過画像を指定すればいいのではないでしょうか。

11 名前： こけし ： 2005/07/29 20:47: すみません言い方が悪かったようです。

Internet Explorer でも時間がたてば背景画像は表示されています。
画像を最初に読み込むのは成功しているにも関わらず
背景画像として表示するには時間がかかるという問題です。
(imgタグではすぐに表示される)

スタイルシートの a:hover や a:active に background-color を書き加えて
画像が表示されるまで背景色をかえてごまかそうと思います。

12 名前：手動： 2005/07/29 20:47: ttp://www.fivesevensix.com/studies/ie6flicker/

ttp://dean.edwards.name/my/flicker.html
http://httpd.apache.org/docs/2.0/mod/mod_expires.html
ttp://www.aspnetresources.com/blog/cache_control_extensions.aspx

http://www.ietf.org/rfc/rfc2616.txt

板違い、終了。

13 名前： こけし ： 2005/07/29 20:47: リンク先に書いていることが全く理解できないんですけど
これは何が言いたいのでしょうか。

14 名前： kanasansoft ： 2005/07/29 20:47 ［URL］: 話の流れでいつのまにか板違い。
失礼。

15 名前： Pid ： 2005/07/29 20:47: >>13
いばって言うことではないと思います (^^;)。

WinIE6 で，background-image を指定した要素に何らかの動的操作を加えた場合，なぜかサーバから再取得・再描画しようとし，「ちらつき」「もたつき」の原因になることがあります（WinIE5 では起こりません）。しかし，キャッシュをコントロールすることで「もたつき」を抑制できる，という話です。

日本ではあまり話題になっていないようなので，非常に有益な情報だと思います。ぜひ隅々まで読んで下さい。

16 名前： こけし ： 2005/07/29 20:47: すみませんいばったつもりはないのですがこの書き方ではそう思われて当然ですね。
気をつけます。

英語が苦手なんで日本語で書かれている上記のApacheのサイトを見ましたが
理解できない用語が多すぎて、コンピューターの知識があまりない自分にとっては難しすぎました。

批判をくらうかもしれませんがあきらめることにします。

一覧へ戻る