javascript - 如何检查从 javascript 正确加载的网络资源？

Question

我的页面加载了许多资源。

我想知道是否有任何方法可以知道资源何时从 javascript 正确加载。

我有:

index.html

和

<script src="myResource.js"></script>

如何从 javascript 知道 myResource 已正确加载，而无需在 myResource 文件内搜索某些变量。

我想做这样的事情:

window.network.isLoaded("myResource.js") ? 'it is loaded!' : 'it is not loaded';

这可能吗？

Answer 1

您应该能够通过 load 事件监听器来实现此目的:

var $script = document.querySelector("[src='myResource.js']");

$script.addEventListener("load", function () {
    // your callback's code
});

<小时/>

正如 @pwolaq 所指出的，当脚本已经加载时，此代码将不起作用。

要解决此问题，您可以使用事件委托(delegate)和事件捕获(并确保将此代码放置在脚本定义之前):

var $document = document.querySelector("body");

document.addEventListener('load', function(evt) {
    var $script = document.querySelector("script[src='myResource.js']");

    if (!evt.target.isEqualNode($script) {
        return;
    }

    // Callback code
}, true);