質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1840閲覧

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

nanamin

総合スコア27

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/08/05 15:30

編集2017/08/05 15:31

###前提・実現したいこと
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. その他

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

テストしてないのでコピペしても動かないかもしれないけど、
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

Tak1016

総合スコア1408

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nanamin

2017/08/06 14:00

なるほど。わかりました。 なんとなくイメージがつかめました。 有難うございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問