在jQuery / JavaScript中预加载资产失败时该怎么办

Question

问题描述：

让我们说我有一个网站无偿使用图形和音频。我想要预先加载所有这些资产，显示一个预加载＆＃39;在实际网站变得可用之前，屏幕（即将淡出的DIV）。

我遇到的问题是，文件经常无法加载（这似乎最常发生在Chrome中 - 可能与并发连接数有关？）。当然，这可以防止网站加载（即永远不会触发loadSite()）。那个案子我该怎么办？有没有办法重新尝试加载文件？我应该在 X 一段时间之后加载网站吗？这里的典型后备解决方案是什么？什么会导致我的资产在大约四分之一的时间内无法加载？

下面提供了预加载器的示例。随意批评它;我喜欢看到更好的JavaScript预加载解决方案，如果它在那里。任何效率或可靠性的提高都是最受欢迎的。

代码：

var Images = {
    1:  'img/one.png',
    2:  'img/two.jpg',
    3:  'img/three.gif',
    4:  'img/four.png',
    5:  'img/five.jpg'
}
var Sounds = { 
    1:  'snd/one.ogg',
    2:  'snd/two.mp3',
    3:  'snd/three.wav',
    4:  'snd/four.ogg',
    5:  'snd/five.mp3'
}
var filesToLoad = Object.keys(Images).length + Object.keys(Sounds).length,
    filesLoaded = 0;

function preloadImages() {
    for (var key in Images) {
        if (Images.hasOwnProperty(key)) {
            loadImage(Images[key]);
        }
    }
}
function loadImage(uri) {
    var img = new Image();
    img.onload = isFileLoaded;
    img.src = uri;
}

function preloadSounds() {
    for (var key in Sounds) {
        if (Sounds.hasOwnProperty(key)) {
            loadSound(Sounds[key]);
        }
    }
}

function loadSound(uri) {
    var audio = new Audio();
    audio.addEventListener('canplaythrough', isFileLoaded, false);
    audio.src = uri;
}

function isFileLoaded() {
    filesLoaded++;
    alert(filesLoaded + ' of ' + filesToLoad + ' assets loaded'); //Debug
    if (filesLoaded >= filesToLoad) {
        loadSite();
    }
}

function loadSite() {
    //Load the site here
}

preloadImages();
preloadSounds();