Image()と画像の先読みについての基本的な概念？

こん○○は。いつもお世話になっております。
以前少しだけ学校で画像の先読みについて学んだのですが、
今になってものすごく基本的と思われるレベルで、
疑問が沸いてきてしまいました。

例えば
<img name="mypicture"> タグは、Imageオブジェクトを作り、
document.images["mypicture"] でアクセスできることは理解できました。

ただ、下記のようにnew Image()を使用した場合、
<img>タグとは独立にImageオブジェクトが作られ
ブラウザのキャッシュに保存されるので、こうしておくだけ良い、
と習いました。それが良くわかりません。

---------------------------------------------------------
if (document.images){
var img1 = new Image();
img1.src = "aaa.jpg";
var img2 = new Image();
img2.src = "bbb.jpg";
}
---------------------------------------------------------
<img src="ccc.jpg" name="mypicture">
<a href="#" onClick="if (document.images){window.document.mypicture.src='aaa.jpg'; return false; }">
切替！</a>
---------------------------------------------------------

質問(1)
この方法だとせっかく最初に作っておいた【img1】や【img2】を
利用していないように、私には見えます。
これでは意味がないのでは？と思ったのですが、
確かにこれで先読み機能は果たせているようで、
この辺が良くわかりません。

質問(2)
もしもここの変数名を【img1】の代わりに、
<img>タグの名前として使っている、【mypicture】としたら
ブラウザは混乱してしまうのでしょうか？
まず自分が混乱するので(^^; 実際に使用するつもりはありませんが、
理論上はどうなのかな、と。

どうかこの迷える初心者にご指導をおねがいたします。m(_ _)m

No.1 ベストアンサー 回答者： suzuki-_- 回答日時： 2007/02/05 07:25

> 質問(1)

キャッシュにない新しいもの（今回で言うと画像）は、
描画するための情報を取得（ダウンロード）しようとするため、
切替を行った際に読み込む時間ができて、表示迄に時間がかかってしまいます

【img1】や【img2】は、Imageオブジェクトによって、
先に画像を参照して読み込みキャッシュさせることで、
画像の切替時に、読み込み待ちによる表示の遅延を防ぐ役割を担っているのです

参照によってimageオブジェクトだけにその情報が格納されるわけでなく、
PCのキャッシュとしても情報を読み込んでくれるということを理解すると、
【img1】や【img2】を画像切替の際に使っていなくても意味があるというのが納得できるでしょうか


> 質問(2)
タグ内に name 等で指定したものをjavascript側でアクセスするには、
document というページ情報を持つオブジェクトを使用することで可能になります

例えば document.mypicture というのは
documentオブジェクトの中にある mypicture を指しています

変数自体は documentオブジェクトの中にあるわけではないので、
変数名を mypicture としてもブラウザが混乱することはありません

この回答へのお礼

お返事ありがとうございます！

>PCのキャッシュとしても情報を読み込んでくれるということを理解すると

なるほど。IMGタグのところに来た時に、PC上の無数にある
キャッシュの中から画像ファイルの名前を頼りに引っ張ってくるわけですね？
でもだとしたら、その際に、画像ファイルの名前からではなくて、
例えばimg1.srcなどのようにして引っ張ってきた方が
ずっと効率が良さそうな気がするのですが、合っていますか？
画像のファイル名だともし同じファイル名のものがあったりしたら、とか考えてしまうんですよね...。

質問(2)のご説明もありがとうございます。
ただの変数 vs documentオブジェクトの中（下層？）に組み込まれているもの
というはっきりした別モノなんですね！

お礼日時：2007/02/06 16:50

No.2 回答者： suzuki-_- 回答日時： 2007/02/06 17:59

> でもだとしたら、その際に、画像ファイルの名前からではなくて、

> 例えばimg1.srcなどのようにして引っ張ってきた方が
> ずっと効率が良さそうな気がするのですが、合っていますか？
> 画像のファイル名だともし同じファイル名のものがあったりしたら、とか考えてしまうんですよね...。

例えば img1.src を aaa.jpg としても、そこに格納されるパス情報は、
http://や、ローカルなら C 等から始まる絶対パスです
これにより同じファイル名でも同じパスでない限り関連性はありません

また、最初の img1.src = "aaa.jpg"; は 、srcを～aaa.jpg として
設定すると同時に、～aaa.jpg を参照しに行って来い！という感じで、
img1.srcから引っ張る際は srcの情報を元に(=～aaa.jpg) 参照して来い！という感じです

なので、img1.srcを使っても aaa.jpg という直接指定でも、
どちらも参照先指定の為、効率は変わらないといったところです

また、キャッシュは元々より早くその情報を返すために設計されています
例え数え切れないほど量があっても、効率よく見つける仕組みができあがっているので、
特に心配は必要ないと思いますよ

この回答へのお礼

なるほどよおくわかりました。
2回もお付き合いいただき、本当に感謝しています。
印刷して保存版にいたします♪

お礼日時：2007/02/07 14:39