javascriptで画像をローディングして、キャッシュしてから操作したい

###前提・実現したいこと
javascriptで簡単なタイピングゲームのようなものを作りたいと考えています。
画像が表示されて、キーを打つと次の画像にいくというものです。
ネットワークを介す場合、画像の読み込み種類が多くなるので、キャッシュさせてから開始したいと思っていますが、
そのようなことはできるのでしょうか。
プロトタイプから作っているのでかなり簡潔です。

###該当のソースコード

javascript
1<html>
2<head>
3    <meta charset="utf-8" />
4    <style>
5    </style>
6    <script>
7    //読み込ませたい画像
8    var key = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
9    //キー押下操作
10    document.onkeydown = function (e){
11	if(!e) e = window.event;
12    document.getElementById("moji").textContent = window.event.key;
13    var k = window.event.key;
14    var tag = '<img src="img/' + k + '.gif" />';
15    document.getElementById("t_img").textContent = tag;
16    t_img.innerHTML = tag;
17
18    };
19
20    </script>
21</head>
22<body>
23    <h1 id="moji"></h1>
24    <p id="t_img">
25    </p>
26</body>
27</html>
28

###困っていること
ローカル環境なので本当にキャッシュされているのかがわかりません。
どう判定すればよいのでしょうか。

###よりスマートにするためには？
おそらく、読み込ませるタイミングは色々だと思います。
0. ページを開いたとき（ページに行ったとき）
0. スタートボタンを押したとき
0. ローディング画面を作ってその時に読み込む。
0. その他

どれが一番理想でしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

テストしてないのでコピペしても動かないかもしれないけど、
Imageオブジェクトを使えば画像読み込み完了にコールバックを指定できます。
今回は26種類のgifを読み込むので26個のImageオブジェクトを作って
コールバックが26回実行されたら completedコールバックを実行しています。

completedコールバックはimages（imageオブジェクトの連想配列）を受け取るので、
あとは入力されたkeyからimages[key]でimageオブジェクトを取り出します。

imageオブジェクトはdomに追加すればそのまま<img>タグになります。

javascript
1var key = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
2
3
4var loadImage = function( keys, completed) {
5   var key = keys[i];
6   var length = keys.length;
7   var count = 0;
8   var images = {};
9   for(var i=0;  i < length; i++ ) {
10      var image = new Image();
11      image.onload = function() {
12        count++;
13        if(count == length) {
14           completed(images);
15        } 
16      };
17      image.src = "img/" + key + "gif";
18
19      images[key] = image;
20   }   
21};
22
23
24loadImage(key, function(images) {
25   
26   // 全画像がロード完了してる。
27
28  // aが押された
29
30   var key = "a";
31   var img = images[key];
32
33   // body に追加。
34   document.body.appendChild(img);
35    
36});

読み込むタイミングですが、

WEBを作るうえでの基本はそのページがなんのページなのかをいち早く表示させることです。
せっかくアクセスしたくれた人がいるのに、いきなりローディングで待たされたら、そのサイトがなんのサイトかもわからずに、出て行ってしまう可能性があるからです。

なのでゲームであればゲームの開始画面をいち早く表示しましょう。

スタート表示しておいて裏側で画像などのリソースをローディングさせ、ロードが完了したらスタートボタンを押させましょう。スタートボタンを押すまでに説明を読んだり理解する時間があるのにその間に何もしないのはもったいない。
「データを読み込んでいます。読み込みが完了するとゲームを開始できます。」などのメッセージを出すといいでしょう。
また画像ファイルが26個なので読み込んだ画像数*100/26 で何パーセント読み込んだかも表示させることができますね。
どれくらい待たないといけないのかをユーザに伝えるUIを考えましょう。

また、画像は通常キャッシュされます。
2回目以降はほとんど待ち時間なしにゲームを開始できるようになります。

投稿2017/08/05 17:23