595457 ランダム
 ホーム | 日記 | プロフィール 【ケータイで見る】 【ログイン】

Web標準にアプローチ 〔まいまいのお宿。〕

2007/06/16
楽天プロフィール XML
カテゴリ:PC&Web


「画像のプリロードってどうやってするんでしょう?」

いつも Dreamweaver で勝手に書いてくれちゃうので
ロールーバーもプリロードイメージも気にすることなくできちゃうわけですよ。

ソフト依存だと、ソフトが変わると勝手にほかのタグが入ってきちゃったりして
嫌だな~と、ずーっと思っていたんです。

ちょっと時間もあることだし、ロールオーバーしたついでに
画像のプリロードのさせ方をネットでサクサクと検索しました。

もっとも単純でわかりやすかったページがこれ。
画像のプリロード(先読み)
で、私が書いたコードが下のとおり。
とっても単純な書き方なので、もうちょっと改変したいと思っているの。
シンプルなのはいいんだけれどもね~


■Javascript

function PreLoad(obj,val) {
    var d = document;
    var img = obj;
    d.img = new Image();
    d.img.src = val;
}

■HTML

<body onload="PreLoad('img1','image/aaa1.gif');PreLoad('img2','image/bbb1.gif');>


これは、Javascript で、単に先読みしているだけだから
本当に先読みに成功しているのかどうかが、目に見えてわからないんです。

うーむ。困りました。

けど、先読みに成功しているならば、キャッシュされているはずなので
キャッシュファイルを確認すればいいですよね~
「インターネット一時ファイル」ってヤツですわ。

見方は簡単!
Internet Explorer の 「ツール」⇒「インターネットオプション」を開いて
「全般」タブの「インターネット一時ファイル」のところにある「設定」ボタンをポチッと押す。
そうすると、「ファイル表示」ボタンがあるから、それを押して中身を見るの。

結構たくさんのファイルがあるから、どれがどれやら見分けにくいので
テストをするときには、「インターネット一時ファイル」のところにある「すべて削除」で削除してから
ガンガンとテストしてみましたよ。

ちゃーんと、「aaa1.gif」と「bbb1.gif」が保存されていたので
先読み成功ってことを確認できました。




久しぶりに更新したわ(汗)
寒くなったと思ったら、今日はメチャメチャ暑いです。
室温ただいま32度。超快晴!
口内炎も痛いし、暑いし、ダブルパンチです。
ここ数日、鼻の調子も悪いしね~
夏風邪ですか?嫌なんですけど(汗)

そんじゃ、また~


現在のWebスカウター値 182。上がってるね餭

・・・・・つづく

東京23区中心・駅近ホテルズ散文誌・365

*Web標準2007年版目次*






最終更新日  2007/06/16 02:13:53 PM
コメント(11) | コメントを書く




■コメント


Re:Javascriptで画像の先読み「プリロード」するときのメモ(06/16)   マジョリン さん
久しぶりの更新ですね^^
見に来てみたけど
やっぱりちんぷんかんぷんです^^;
私がまいまいさんの足元に近づく日は来るのでしょうか?(笑 (2007/06/16 04:37:47 PM)

Re:マジョリンさんへ   まいまい@Web標準のお勉強中 さん
わかる必要ってないと思いますよ(笑)
必要なときがこないとわからないものです。
若しくは、こういうお仕事をしていたり
趣味であったりしないとね。

足跡を残しに来てくださるだけで嬉しいですよ♪
(2007/06/16 07:29:34 PM)

ん?   ごう さん
そんじゃ、また~
って書き方なんか・・・(笑)

どっかで見たぞ! (2007/06/16 11:18:20 PM)

Re:ごうさん   まいまい@Web標準のお勉強中 さん
>そんじゃ、また~
>って書き方なんか・・・(笑)

>どっかで見たぞ!
-----

ん?そぉお?え!そぉお?
どこかって何処ですか~
誰かのブログ???感染した?
気になることを言い残して去らないでくださいよぉ~
(2007/06/17 03:09:26 PM)

Re:Javascriptで画像の先読み「プリロード」するときのメモ(06/16)    いわし さん
体調はいかがですか?
入梅して蒸し暑い日が続いているので、汗をかいてお体を冷さないように気を付けて下さいね。

口内炎にはビタミンB群が良いそうです。
あと、これから甘い物を食べる機会が増えると思いますが、甘い物を食べ過ぎて糖分が体に溜まると夏バテの原因にもなるそうですが、ビタミンB群にはこの糖分を効率よくエネルギーに変えてくれる効果があるので夏バテ予防にもなるようです。
もし、機会があったらぜひ試してみてくださいね。
ちなみに、私も口内炎になりやすかったので、1年くらい前からネイチャーメイドのBコンプレックスを飲んでます^^ (2007/06/19 09:30:35 PM)

Re:いわしさんへ   まいまい@Web標準のお勉強中 さん
口内炎は、随分よくなりました。
噛んじゃうと、よく口内炎に発展しちゃうんですよぉ~

>ちなみに、私も口内炎になりやすかったので、1年くらい前からネイチャーメイドのBコンプレックスを飲んでます^^

あ!それ、探してみますね。
(2007/06/21 08:45:04 AM)

やっと追いつきました   大阪のおやじ さん
なにからたどり着いたか忘れましたがその日の内容がおもしろく、昼休みに初日分から(時にはざっと斜め読み、というか専門的なレクチャーはほとんど斜め読みです)見始めて最新分まできました。

最近ブログやらxoopsやらさわりはじめまして、これから過去の記事をゆっくり参考にさせてもらいたいと思います。

よろしくです (2007/06/22 12:45:28 PM)

Re: 大阪のおやじさん   まいまい@Web標準のお勉強中 さん
はじめまして。
コメントありがとうございます。
二重投稿してしまっていた分は、削除処理しましたよ。
時々やっちゃうんですよね(汗)


>なにからたどり着いたか忘れましたがその日の内容がおもしろく、昼休みに初日分から(時にはざっと斜め読み、というか専門的なレクチャーはほとんど斜め読みです)見始めて最新分まできました。

どの日の記事かはわかりませんが「面白かった」という感想、嬉しいです♪
文章を書くのは決して得意ではないのですが
このような調子の文ですので堅苦しくはないかな?と思っています。
日々のお仕事などで、疑問に思ったことや、解決できたこと
目から鱗ネタなど、書き溜めていますので
何かの参考になれば幸いです。


>最近ブログやらxoopsやらさわりはじめまして、これから過去の記事をゆっくり参考にさせてもらいたいと思います。

サイト作りに興味がおありのようですね。
触り始めは、苦労も絶えませんが、クリアできた時の喜びは格別のことと思います。
ブログ弄り、xoopsカスタマイズは、得意じゃないけど
チャレンジする楽しさはありますね。
ぜひ、思い通りのことができるようになれるようになるといいですね。
(2007/06/22 01:39:05 PM)

質問です。   bongo さん
上記の部分でひとつ質問なのですが、

<body onload="PreLoad('img1','image/aaa1.gif');PreLoad('img2','image/bbb1.gif');>

最後に"が抜けてる気がするのですが、大丈夫なのですか?また、入れるとしたら;の前か後ろ、どちらに入れるべきなのでしょうか? (2008/08/23 01:23:17 PM)

Re:質問です。(06/16)   まいまい@Web標準にアプローチ さん
bongoさん、こんにちは。
忘れかけていた記事にどうもです(汗)


><body onload="PreLoad('img1','image/aaa1.gif');PreLoad('img2','image/bbb1.gif');>

>最後に"が抜けてる気がするのですが、大丈夫なのですか?また、入れるとしたら;の前か後ろ、どちらに入れるべきなのでしょうか?
-----

あらあら、失礼しました。
コピペミスですね(汗)

<body onload="PreLoad('img1','image/aaa1.gif');PreLoad('img2','image/bbb1.gif');">

これが正解となります。

onload="" のダブルクウォートの内側の書くのが正しいです。 (2008/08/23 02:26:42 PM)

Re:Javascriptで画像の先読み「プリロード」するときのメモ(06/16)   ななしのごんべ さん
Preload の閉じかっこ(")がないです。訂正されたほうがいいかもしれないです。
下記は正解です。
<body onload="PreLoad('img1','images/xxx.jpg');PreLoad('img2','images/xxx_on.jpg');"> (2013/09/13 06:30:26 PM)

Powered By 楽天ブログは国内最大級の無料ブログサービスです。楽天・Infoseekと連動した豊富なコンテンツや簡単アフィリエイト機能、フォトアルバムも使えます。デザインも豊富・簡単カスタマイズが可能!

Copyright (c) 1997-2014 Rakuten, Inc. All Rights Reserved.