检测js / css文件加载失败

Question

在我们的SAAS Web应用程序中，我们使用了大量的js和css文件（总共大约80个），并且在我们的应用程序可以正常运行之前，必须加载一些文件，尤其是其他依赖于jQuery的文件。

在理想的网络环境中，这不会带来任何问题，因为每次都会加载所有资源。但是在生产环境中，我们发现当网络很差时，某些js / css文件没有正确加载并不罕见。发生这种情况时，浏览器会在控制台中记录js / css加载超时错误，并且应用程序似乎正在运行。然后，当应用程序尝试调用未能加载的js文件中定义的某些函数时，会抛出一些未定义的异常并将其记录在控制台中，并且应用程序停止运行，这会使用户大部分时间感到困惑。请注意，我不是在谈论404加载错误，这些错误是编程/部署错误，只是由于网络连接不良导致的超时错误。

我们认为这种体验不是最佳的。我们想检查在应用运行之前是否加载了所有资源。如果有任何问题，我们会警告用户，以便他可以选择重新加载应用程序，这可以减少很多混乱，我们认为。

有些人可能会建议连接文件并将数字减少到一对，是的，可以减少出现超时错误的可能性。但仍然无法解决问题 - 我们仍然可能在加载几个文件时出现超时错误。

经过对SO的一些研究，我发现了以下建议： 1使用window.error来捕获未捕获的异常，包括未定义的异常; 2在每个js / css文件中放置一些特殊的变量/状态，并检测该变量/状态是否存在; 3.使用onload事件处理程序注册加载事件已成功完成，然后调用setTimeout查看是否有任何事件尚未注册;

AFAICS，这些都有一些缺点： 1是一种惰性检测技术，即我们不知道在抛出异常之前脚本没有正确加载; 2凌乱，在某些情况下需要修改第三方插件; 3据说IE在某些情况下触发onload事件有一些问题;

那么检测这种js / css文件加载失败的最佳跨浏览器机制是什么？

Answer 1

您可以在javascript中加载脚本。例如：

var scriptsarray=new Array(
"script1.js",
"script2.js",
"style1.css",
"style2.css"
)

var totalloads=0;

for (var i=0;i<scriptsarray.length;i++){
var script = document.createElement('script');
                    script.type = 'text/javascript';
                    script.src = scriptsarray[i] + '?rnd=' + Math.random();
                   document.body.appendChild(script);
    script.addEventListener('load', wholoads, false);
    script.addEventListener('error', errload,false);
}

function wholoads(scriptname){
 totalloads++;
 if (totalloads==scriptsarray.length){alert('All scripts and css load');}
}

function errload(event){

    console.log(event);
}

Answer 2

window.addEventListener("error", function (e, url) {
    var eleArray = ["IMG", "SCRIPT", "LINK"];
    var resourceMap = {
        "IMG": "Picture file",
        "SCRIPT": "JavaScript file",
        "LINK": "CSS file"
    };
    var ele = e.target;
    if(eleArray.indexOf(ele.tagName) != -1){
        var url = ele.tagName == "LINK" ? ele.href: ele.src;
        console.log("src：" + url + " File " + resourceMap[ele.tagName] + " failed loading. ");

        return true;// dont show in console
    }
}, true);