在jQuery/JavaScript中预加载资产失败时该怎么办 发行说明：

比如说，我有一个免费使用图形和音频的网站。我想预先加载所有这些资产，在实际站点可用之前显示一个“预加载”屏幕（即一个将淡出的DIV）

我遇到的问题是，文件常常无法加载（这似乎在Chrome中最常见——可能与并发连接的数量有关？）。当然，这会阻止站点加载（即，

loadSite（）

永远不会被触发）。在那种情况下我该怎么办？有没有办法重新加载文件？我应该在X时间之后加载站点吗？这里典型的回退解决方案是什么？是什么导致我的资产在大约四分之一的时间内无法加载

下面提供了预紧器的示例。自由地批评它；我希望看到更好的JavaScript预加载解决方案，如果有的话。在效率或可靠性方面的任何改进都是最受欢迎的

代码：

---

添加

onerror

处理程序，如果加载所有带有消息“内容未加载，请刷新页面”的Add alert/tooltip非常重要。您是否考虑过

jQuery

的

$（document）.ready（）

？@AndyM您能详细说明一下吗？根本不知道你在暗示什么。@Pinal我希望有比告诉用户刷新页面更优雅的东西。：-）看起来更像是万不得已的手段。我要做的是将全屏覆盖在显示加载的站点上，并将jQuery设置为在加载页面时将其隐藏。然后我会有一个单独的循环，检查封面在设定的时间后是否仍然可见，如果仍然可见，则将单词Loading更改为错误消息。然而，这是个人的做法，而不是最佳做法。我不确定是否真的有最佳实践，因为它不应该经常出现，如果有的话。这是一个根本原因，而不是一个绷带问题。有一个急救箱是好的（处理错误），但如果你一直不得不使用它，你需要解决为什么会这样。

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();