jquery - 在 JQuery 中预加载声音和图像。它通常可以工作，但有时会卡住，我希望得到有关改进代码的建议

Question

这是我第一次在这个我已经爱上的网站上提问。我正在尝试使用 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});
    }
}

Here's the game I'm working on. See if it works on your computer 。谢谢!!

Answer 1

实际上，您不需要创建 DOM 元素，并将它们附加到 DOM。由于您拥有资源的 url，因此只需对其执行快速获取请求，以便可以缓存它。

这是我不久前所做的:

    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 循环”结构，以确保将每个资源作为一个序列依次加载。