質問: ### 前提・実現したいこと javascriptで簡単なタイピングゲームのようなものを作りたいと考えています。 画像が表示されて、キーを打つと次の画像にいくというものです。 ネットワークを介す場合、画像の読み込み種類が多くなるので、キャッシュさせてから開始したいと思っていますが、 そのようなことはできるのでしょうか。 プロトタイプから作っているのでかなり簡潔です。 ### 該当のソースコード ``` ``` ### 困っていること ローカル環境なので本当にキャッシュされているのかがわかりません。 どう判定すればよいのでしょうか。 ### よりスマートにするためには? おそらく、読み込ませるタイミングは色々だと思います。 1. ページを開いたとき(ページに行ったとき) 2. スタートボタンを押したとき 3. ローディング画面を作ってその時に読み込む。 4. その他 どれが一番理想でしょうか。
回答: テストしてないのでコピペしても動かないかもしれないけど、 Imageオブジェクトを使えば画像読み込み完了にコールバックを指定できます。 今回は26種類のgifを読み込むので26個のImageオブジェクトを作って コールバックが26回実行されたら completedコールバックを実行しています。 completedコールバックはimages(imageオブジェクトの連想配列)を受け取るので、 あとは入力されたkeyからimages[key]でimageオブジェクトを取り出します。 imageオブジェクトはdomに追加すればそのままタグになります。 ``` 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"]; var loadImage = function( keys, completed) { var key = keys[i]; var length = keys.length; var count = 0; var images = {}; for(var i=0; i < length; i++ ) { var image = new Image(); image.onload = function() { count++; if(count == length) { completed(images); } }; image.src = "img/" + key + "gif"; images[key] = image; } }; loadImage(key, function(images) { // 全画像がロード完了してる。 // aが押された var key = "a"; var img = images[key]; // body に追加。 document.body.appendChild(img); }); ``` 読み込むタイミングですが、 WEBを作るうえでの基本は そのページがなんのページなのかをいち早く表示させることです。 せっかくアクセスしたくれた人がいるのに、いきなりローディングで待たされたら、そのサイトがなんのサイトかもわからずに、出て行ってしまう可能性があるからです。 なので ゲームであればゲームの開始画面をいち早く表示しましょう。 スタート表示しておいて裏側で画像などのリソースをローディングさせ、ロードが完了したらスタートボタンを押させましょう。スタートボタンを押すまでに説明を読んだり理解する時間があるのにその間に何もしないのはもったいない。 「データを読み込んでいます。読み込みが完了するとゲームを開始できます。」などのメッセージを出すといいでしょう。 また画像ファイルが26個なので 読み込んだ画像数*100/26 で何パーセント読み込んだかも表示させることができますね。 どれくらい待たないといけないのかをユーザに伝えるUIを考えましょう。 また、画像は通常キャッシュされます。 2回目以降はほとんど待ち時間なしにゲームを開始できるようになります。