在我们的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文件加载失败的最佳跨浏览器机制是什么?
答案 0 :(得分:10)
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);
答案 1 :(得分:4)
您可以在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);
}