javascriptで複数の画像をプリロードする方法を考えてみたんだけど、こんなシンプルで大丈夫なんだろうか…。
絶対落とし穴がありまくる気がするけど、とりあえず動いてはいるから良いか(；・∀・)
応用して、ゲームでロード画面作れば、読み込み中でグダグダになる事も無くなる…ハズ！
enchant.js便利だし好きだけど、自分で１から作れないとネー(*´･ω･)(･ω･｀*)ﾈｰ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DCOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <script> window.onload = function() { // 読み込んだ数カウント var imgCnt = 0; // イメージオブジェクト var Img = new Array(); // 読み込む画像 var IMG = new Array( 'images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg', 'images/6.jpg' ); // 何枚中何枚目かを表示 document.getElementById('hoge').innerText = imgCnt + " / " + IMG.length; // for(i = 0; i < IMG.length; i++){ Img[i] = new Image(); Img[i].src = IMG[i]; Img[i].onload = function() { // 読み込んだカウントアップ imgCnt++; // 何枚中何枚目かを表示 document.getElementById('hoge').innerText = imgCnt + " / " + IMG.length; // カウントと画像数が一緒になったら実行 if(imgCnt == IMG.length) loaded(); } } // ロード完了時に呼び出し function loaded() { document.getElementById('hoge2').innerText = "ロード完了"; } } </script> <body> <span id="hoge"></span> <span id="hoge2"></span> </body> </html> |