javascriptでpreloadする場合この記述であっていますか＋それに関しての質問

Question

ある個数の画像と同数のサウンドがあり、これについてクイズのようなページを作っています。画像も音源も多いので始めに読み込ませて動かそうと思っていますが、

①この記述方法で間違っていないでしょうか。（今回の場合89番まで）

window.onload = function(){
    const MaxImg = 89 ;
    for (i = 0; i < MaxImg; i++){
        let img = document.createElement('img');
        img.src = 'img/' + i + '.jpg';
    }
    for (i = 0; i < MaxImg; i++){
        let sound = document.createElement('audio');
        sound.src = 'sound/quiz/' + i + '.wav';
    }
}

②この後以下のような記述で呼び出した場合に通信負荷を下げられる、ということでしょうか。

TargetLi.innerHTML = '<img value="' +QuizArray[i]+ '" src="img/' + QuizArray[i] + '.jpg" /> '
//すみません、前後の記述は長くなるので割愛します。ソース呼出の箇所のみご覧ください。

③imgやsound自体をクリエイトはしつつダミー的な要素にしていると思うのですが、これらをデベロッパツールなどで確認する方法はあるのでしょうか。

以上欲張りな質問ですがよろしくお願いします。

'-----------------------以下捕捉
補足要請ありがとうございます。

現状動きそのものはおかしなところはなく、wavがサイズが大きいためload時に相当時間がかかっていることから正常に動いているものと推測されます。
ただ書き方的に正しいのか、効率が悪くはないのかを知りたかったのと、preloadされているのかどうかの判断がデベロッパー等で確認できないものだろうかと思っての質問でした。
document.createElementしているので大丈夫だとは思うのですが、実体がないため確認の仕様がなく不安に思っています。
その後の呼び出しについても、なんだか改めてサーバーにソースを取りに行っている感じがしまして。という感じでしょうか。

Comments

[m.ts10806]

間違ってるかどうかは動かしてみればわかるのでは？
この提示のされ方だと他者には動かせませんけど。

[mattari_panda]

現状作ったものをご自身で動かしてみて、どういう動きになっていますか？
m.ts10806さんが上でおっしゃられている通り、この質問の仕方と断片的なコードなので
ずばりと回答するのが難しく、推測に基づいた回答になってしまいそこからさらにやり取りが発生しそうな気がします。

ちなみに推測ですが、こんな感じで困ってるのでしょうか？
・クイズゲームを作っている
・クイズの画像と音声を出題時に表示＆再生したい
・作ってみたら、出題時に画像の表示と再生に時間がかかった（サーバーにアップした？）
・事前に読み込むといいらしい（プリロードしたい）
・自分で作ってみたけど、ローカル環境でプリロードできているか不明（サーバーにアップできない？）
・プリロード出来ているのかどうか、描画時の動きなどをデベロッパツールで確認したい（？）

このあたりの仕様も踏まえて質問していただけると大変助かります。

Answer 1

補足説明ありがとうございます。

①この記述方法で間違っていないでしょうか。

一言で言えば間違っています。
提示されたコードには、肝心の画像や音声ファイルの読み込み完了を検知する記述がありません。

まずはwindow.onloadに関して理解してみましょう。
https://developer.mozilla.org/ja/docs/Web/API/Window/load_event

こちらのMDNの解説にあるとおり、window.onloadは「ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生」するイベントです。これには（非同期でない）JSも含まれます。

詳しくはさらにwindow.DOMContentLoaededに関しての解説を読んでみてください。
https://developer.mozilla.org/ja/docs/Web/API/Document/DOMContentLoaded_event

ここまでをある程度理解した前提で話しを進めますと、提示されたコードには画像自体の読み込みを検知するimg.addEventListener('load' ~がありません。上記コードに追記するなら、こんな感じです。

window.onload = function(){
console.log('window.onload');
    const MaxImg = 89 ;
    for (i = 0; i < MaxImg; i++){
        //ここではsrcが空のimgタグを作っただけ（ちなみにletじゃなくてconstで良いです）
        let img = document.createElement('img');
        img.addEventListener('load', ()=>{
            //ここで画像の読み込みが完了したことを検知できる        
            console.log('img:'+i+' Load Complete.');
        });
        //ここで画像の読み込みが始まる
        img.src = 'img/' + i + '.jpg';
    }
    //以下略
}

これをコンソールで確認すると、window.onloadが先に出力され、img:0 Load Complete.はその後に出力されます。
つまりwindow.onloadの中でプリロード処理を書いても、すでにページの要素は読み込みが完了しており、ページが動き出しているなかで（クイズなどがプレイできる状態で）、その後別途画像を読み込んでいることになります。

この状態では正確には「プリロード」とは呼べないでしょう。

画像や音声ファイルのプリロードを行う場合はwindow.onloadの中で書く必要はありません。
また今回のように読み込む個数が決まっている場合は、その数を利用してプログレスバーなどを作ることもできます。

---

②この後以下のような記述で呼び出した場合に通信負荷を下げられる、ということでしょうか。

「通信負荷」というのが漠然としているので、答えづらいのですが画像自体の読み込みは終わっていれば
すべての画像の読み込みが完了している状態でしたら、再度同じ画像を読み込む（ロード）することはないです。

ただ最初の読み込み時に提示していただいたコードで、document.createElement('img')とimg要素をつくっているのに、また同じ画像を読み込むTargetLi.innerHTML = '<img~としてしまうのはもったいないので、最初に作ったimg要素を格納しておき、それをTargetLiに追加したほうが良いと思います。

ざっくりとこんな感じでしょうか。
https://codepen.io/mattari-panda/pen/jOVPYej

---

③imgやsound自体をクリエイトはしつつダミー的な要素にしていると思うのですが、これらをデベロッパツールなどで確認する方法はあるのでしょうか。

プリロード時点での読み込みはデベロッパツールの「Network」タブで見ることができます。
詳しくは公式ドキュメントか、「デベロッパーツール ネットワーク」で検索してみて下さい。
ネットワークタブの「Throttling」という部分（デフォルトではOnlineになっている）部分を変更すると、ネットワークの速度を擬似的に遅くすることも出来るので、ローカルでもプリロードなどの処理は見やすくなります。

---

■補足に関して
いくつかアドバイスです、ここまで長くなったので気が向いたら読んでください。

・wavファイルを使うのはおすすめできません
ファイルサイズが大きすぎるためです。mp3などに変換したほうが扱いやすくなります。

・Webサイトのパース、ロード、描画、このあたりをざっくりとで良いので学んでみてください。
基本はHTML＋CSSを先にしっかり学ぶことが実は近道なのですが、今回のご質問ですとそのあたりがどこまで理解できているかわかりませんでした。HTML＋CSSを学ぶ過程でWebサイトがどのようにして表示されるかを学ぶと割とすんなり理解出来ますし、そのあとJSを学ぶときにDOMのコントロールなどがすんなり出来るようになります。

「クイズのようなページ」のように一つのアプリケーションともいえるレベルになると、HTML+CSS+JSのすべてである程度理解している必要があるので、ものすごく勉強になると思います。
そしてかならず「Webサイトのパース、ロード、描画」あたりで悩むことになるので、ここを乗り越えられれば自分で思った通りにアプリケーションをコントロールできるようになります。

道は長いかもしれませんが、頑張ってみてください。

Comments

[Izumo1101]

言われてみれば！という感じでした。しかもdefer属性を付けたファイルに書いていたので、なんだかちぐはぐな感じになっていました。またロード後の処理についても配列に入れたほうが良いのかと思っていたのでドンピシャな回答が参考になりました。
デベロッパはnetworksで見ればよいのですね、なるほど。wavの重さにも閉口していましたのでやはりかといった感じ。非常に勉強になりました。