delicious! newsing! buzzurlにブックマーク! Yahoo!ブックマーク ライブドア - この記事をクリップ! このエントリーを含むはてなブックマーク

cssで画像をプリロード

2006/11/26 (Sun) at 4:59 am

あとから追記。2009年4月24日付。

今日知ったのですが、Slashdotに「ネットに蔓延するデタラメTIPS」なんてこの記事が紹介されてしまいました。それはどうもすません。ご指摘ありがとうございます。いまさら記事を消してもしょうがないので、間違い情報を流布した悪い見本としてこのエントリは置いておきます。

3年経ってもデタラメ情報を垂れ流しつづける有害サイトに注意

ブログの普及により、意図せず間違った情報が流れてしまうというのは現代の問題ですが、私はそれに対して明確な答えを持ちません。すまぬまぬこれから気をつけます。ほんとに!ゆるして!おねがい!という子供のような言い訳になってしまうので我ながら困る。今後精進して間違いの確率を減らすようにしていきたいです。いやほんと。

ところで今回 "Anonymous Coward" っていう言葉を初めて知ったのですが、正直いいまして「ガシガシと間違いを発見して世直しをしていきたいのだ〜」という威勢のよい記事を書いているひとがCowardかよ!と思ってしまいました。Cowardに怒られてじつに情けない私というきもちにさせる心理作戦でしょうか。"Anonymous Cowardていう言葉の語源などを知らないのでわかりませんが、なにかシャレがあってそう命名してるかもしれませんが、内容的にいって "Justice League" くらい名乗ってほしいもんだと思いました。

追記以上。

画像ファイルをプリロードしたいときがよくあります。プリロードっていうのは、つまり、htmlページがブラウザのキャッシュに読み込まれた時点でいっしょに読み込ませたいという意味です。オンマウスオーバーの代替画像とか。たいていはjavascriptでやるものでしょうが、かんたんなものなら、cssの方がお手軽です。プリロードしたい画像を次のようにcssで読み込ませちゃいましょう。

#image-preload{
width: 0px;
height: 0px;
display: inline;
background-image:url('画像へのurl');
background-image:url('画像へのurl');
background-image:url('画像へのurl');
}

画像はいくつでもオッケー。1行づつbackground-imageとして記述しましょう。んでもって、bodyのどこか、私はアクセス解析のタグの下なんかによく入れますが、どこでもよいのでこれを記述↓

<div id="image-preload"></div>

これでプリロードされる。ちょっとべんりだと思いませんか?ついでに書いとくと、オンマウスオーバーのリンクボタンをやりたかったら、このようにhtmlに書いとけばオッケーですね↓

<a herf="リンク先url"><img src="画像へのurl" onmouseover="this.src='代替画像へのurl'" onmouseout="this.src='画像へのurl'" /></a>

と書いといて、代替画像を上のやり方でプリロードさせる。という風にすれば、いちいちjavascriptの外部ファイルを書いたりしなくてもサクッとできるので、ちょびっとやりたいときなんかにはこっちの方がお手軽です。

ところで、マウスオンオーバーなんだか、オンマウスオーバーなんだか、どっちだったかいつもわからなくなります。これってトシ?

delicious! newsing! buzzurlにブックマーク! Yahoo!ブックマーク ライブドア - この記事をクリップ! このエントリーを含むはてなブックマーク

add your comment!
mayu
2008/9/9, 11:49 AM
コメント アロー! one-px-ffffff-br one-px-ffffff-tr one-px-ffffff-bl one-px-ffffff-br

この方法でやってみたところ、safariではバッチリなのですが、firefoxではうまくいきません。

両方の環境に対応しているようなものはありませんかー!?

もしご存知でしたら教えてください!お願いします。

one-px-ffffff-tr one-px-ffffff-bl one-px-ffffff-br
add your comment!
ふじい
2008/9/9, 6:59 PM
コメント アロー! one-px-ffffff-br one-px-ffffff-tr one-px-ffffff-bl one-px-ffffff-br

こんちわ。そうですか!教えてくださりありがとうございます。私、それは気づきませんでした。大きな画像などをプリロードってあまりやらないものだから、サッと読み込んでしまうものだから気づかなかったです。いまパッと代替案を思いつきませんけど、なんかありそうですけどねー、んー、どうやったらいいかな。お答えにならなくてすません。なんか気づいたらまた書きます。

one-px-ffffff-tr one-px-ffffff-bl one-px-ffffff-br

コメント・プリーズ!

お名前 (your name)
(required)
url
(optional) ※公開されます。
メールアドレス (email)
(optional) ※公開されません。管理者にだけわかります。
コメント (comment)
(required)

※クッキーに保存すると次回から入力を省略できるので便利ですが、お使いのコンピュータに情報が残りますので、公共のパソコンなどからアクセスするような場合はチェックをはずしたほうがよいでしょう。

※コメント中のhtmlタグは実体参照に変換されます。たとえば、『<』は『&lt;』というかんじになりますのでhtmlタグをそのまま書き込んでくださってオッケーです。

one-px-ffffff-tl one-px-ffffff-tr one-px-ffffff-bl one-px-ffffff-br

PROFILEcaption

藤居ヒロヤ。ウェブデザイナー/ウェブディレクター。ウェブデザインオフィス、3OT NET主宰。名古屋市中区。「優しいデザイン」「激しいデザイン」「正しいデザイン」「セクシーなデザイン」「泣けるデザイン」「もっともなデザイン」... 。あなただけのウェブデザインを丹精込めておつくり致します。見積り依頼等、お気軽にお問い合わせ下さい。

お問い合わせフォーム

RECENT ENTRIEScaption

RECENT COMMENTScaption

TOOLScaption

BOOKMARKScaption

RESOURCEScaption

ARCHIVEcaption