画像preloadについて

[新着] Webテンプレートを仮オープンしました

0   名前： shujiTOKISADA ： 2007/01/06（土） 22:08  ID:3GCxPSV.
謹賀新年！

さて、画像preloadについてお聞きしたいのですが、
preload時に格納する場所としてよく配列を宣言して使われます。
配列構造をわざわざ持つ理由はなんなのでしょうか。
単なるグローバルオブジェクトに格納すれば事足りることではないのかと。
メリットなどあれば教えてください。

また、そうして格納されたと思われる画像ファイルが実際に格納を完了した
ことを確かめるにはどういう手段が考えられますでしょうか。
コーディング段階でのアルゴリズムから、preloadが完全に完了する前に、次
のラインを実行してハンギング状態に捨て置かれる可能性について憂慮していま
す。まさかとは思いますが、こういうことを懸念してでしょうか、格納オブジェクト
自体を関数内においてローカル化する例もみた覚えがあります。しかし、これは
いかにもメモリー的にしたくないことです。

さらに、既存設定画像とのスワップにおいて、そのアクセスコードの書式として
イメージコレクションへの配列インデックスによるスワップ（実際は連想による
アクセス）がよくなされていますが、これとDOMによるピンポイントでのスワップ
との比較ではどちらが推奨されますでしょうか。上で申しました、preloadコード
との相性などにおいて齟齬を生じることは考えられませんか？

最後に、ブロードバンド世代のコーディングとしてpreloadの目安はどのくらいの
サイズにおけばよいのかアドバイスをいただければ幸甚です。JavaScriptコード
が目的別に複数孤立的に混在するページ設定では、できればユーザの判断でイベン
トが生じないかもしれないトリガーとして、わざわざ大きなサイズの画像preloadは
好ましくないと考えたりもします。余分な読み込みは極力避けページのサイズは嫌
が上にも軽く軽くしたいと考えております。

以上複数項目に渡った質問で恐縮ですが、何卒ご回答の程よろしくお願いいたします。
1   名前： 匿名 ： 2007/01/06（土） 22:08  ID:ED0EINcU
> 単なるグローバルオブジェクトに格納すれば事足りることではないのかと。
> 格納オブジェクト自体を関数内においてローカル化する例

キャッシュ「だけ」が目的ならばグローバル配列を使用する必要すらない。ローカルな Image オブジェクトは適当なタイミングで GC されるはず（実装依存だが）。

function prefetchImages () {
    var I = arguments.length;
    var i = 0;
    while (i < I) (new Image).src = arguments[i++];
}

prefetchImages ('sample1.png', 'sample2.png', 'sample3.png');



> そうして格納されたと思われる画像ファイルが実際に格納を完了したことを確かめるには

JavaScript 1.3 の Image オブジェクトには、complete というプロパティがある（DOM HTML の HTMLImageElement の仕様に complete アトリビュートは存在しないが、DOM 実装によっては追加されている）。

あるいは、DOM 実装によっては img 要素ノード上での load、progress、readystatechange イベントをサポートしている。


> イメージコレクションへの配列インデックスによるスワップ（実際は連想によるアクセス）
> DOMによるピンポイントでのスワップ

違いがよく分からない。JavaScript 1.3 でもピンポイント指定は可能だし、DOM HTML でも後方互換性のために document.images が残されている（ただし非推奨）。

どちらにせよ、いちいち document からノードを再検索するのは無駄ではある。document.getElementById、document.getElementsByTagName(NS) とて例外ではない。


> 余分な読み込みは極力避け

明示的にバックグラウンドで読み込むならば、XMLHttpRequest を使用するのが無難かもしれない。

いずれにせよ、画集やニュース系でもない限り、img 要素を多用する機会はそうないはず。装飾画像は CSS に回すべきだし、そうすれば CSS 実装の判断で適当にバックグラウンド処理される（たとえば、ロールオーバーなど CSS だけで十分可能）。
一覧へ戻る