2

私が大好きになったこのウェブサイトで質問するのはこれが初めてです。JQuery を使用してゲームを作成しようとしていますが、サウンドと画像をプリロードする必要があります。画像と音声がブラウザのキャッシュに既にある場合は毎回動作するように見えますが、ブラウザのキャッシュにまだない場合、特に Firefox で読み込みの途中でフリーズすることがあります。私の質問は、何がこれを引き起こしているのか、どうすればそれを防ぐことができるのでしょうか? 通常、ページを更新すると問題は解決しますが、可能であれば最初から問題なく動作するようにしたいと考えています。これが私のコードです：

HTML:

<div id='loading_screen'>Loading <span id='how_much_loaded'>0</span>%</div>
<div id='content'>This is the content</div>

CSS:

#content{opacity:0}
#loading_screen{position:absolute;left:0px;top:0px}

Javascript:

var sounds=["sound0.wav","sound1.wav","sound2.wav","sound3.wav","sound4.wav","sound5.wav","sound6.wav","ding.wav"]
var images=["background-3_blue.jpg","background-3_green.jpg","background-3_yellow.jpg","background-3_red.jpg","play2train.png"]
var loaded_items=0;
var total_items=sounds.length+images.length;

function preload()
{
    for (var index=0;index<images.length;index++)
    {
        $("#preload").append(
            $("<img />").attr({
            src: images[index],
            onload: "counter();",
            style: "display:none"})
         )
    }
    for (var index=0;index<sounds.length;index++)
    {
        $("#preload").append(
            $("<audio />").attr({
            src: sounds[index],
            oncanplaythrough='counter()',
            style: "display:none"})
        )
    }
}

function counter()
{
    loaded_items++;
    $("#how_much_loaded").html((Math.round(loaded_items/total_items*100)))
    if (loaded_items==total_items)
    {
        $("#loading_screen").remove();
        $("#content").animate({"opacity":1});
    }
}

これが私が取り組んでいるゲームです。お使いのコンピュータで動作するかどうかを確認してください。ありがとう！！

4

1 に答える 1

0

実際には、DOM 要素を作成して DOM に追加する必要はありません。リソースの URL を取得したので、キャッシュできるように簡単な get リクエストを実行するだけです。

これは私がそれほど前にしなかったことです:

    var assets = images.concat(sounds); //array of assets

    var i = 0,             //counting assets
        l = assets.length, //length of array
        w = 0;

    var enterframe = setInterval(function()                 //create an enterframe loop
    {
      w += ((100 * i / l) - w) * .8;                        //simple easing function
      document.getElementById('bar').style.width = w + '%'; //apply of value

    }, 25);

    //this function is for delaying assets loading
    function delay(callback, ms) { return function() { setTimeout(callback, ms); } }

    //kind of deferred for loop
    function load()
    {
      if (i != l) { $.get(assets[i++], delay(load, 10)); }
      else { clearInterval(enterframe); exit_preloader(); }
    };

編集：

また、すべてのアセットを同時にロードし始めていることに気付きました。ブラウザはすべてのリクエストを同時に開始するため、これは最善の方法ではありません。私のコードに書かれているように、少なくとも「遅延 for ループ」構造を使用して、各アセットを順番にロードする必要があります。

于 2012-11-27T03:34:37.043 に答える