如何判断页面外部资源加载完成、失败状态

[nevergiveup-j]

业务需求需要统计JS加载失败率，在网上查询一下。简单处理

(function() {
    var gads = document.createElement('script');
    gads.async = true;
    gads.type = 'text/javascript';
    gads.onerror = function() {
        console.log('error');
    }
    gads.onload = function() {
        console.log('onload');
    }
    var useSSL = 'https:' == document.location.protocol;
    gads.src = (useSSL ? 'https:' : 'http:') +
    '//www.googletagservices.com/tag/js/gpt.js';
    var node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(gads, node);
})();

一般是在加载JS的时候增加onload、onerror事件处理，由于这样处理感觉太麻烦了。

之后在网上查询一些资料,可以用document load事件监听外部加载资源信息

document.addEventListener('load', function(e) {
    console.log(e);
}, true);

document.addEventListener('error', function(e) {
    console.log(e);
}, true);

后期想法：收集页面资源加载失败文件成功和失败次数，方便网站之前部署上线后检测资源缺少导致页面功能失效以及样式错乱等。