如何從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所指出的那樣，當腳本已經加載時，此代碼將不起作用。

要解決此問題，您可以使用事件委派和事件捕獲（並確保在腳本定義之前放置此代碼）：

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

Answer 2

通常，腳本是同步加載的。 所以下面的任何腳本：

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

將有權訪問其前任變量和函數。 更好的方法是檢查腳本加載的資源是否存在然后是腳本本身。

Answer 3

你可以使用Javascript來做到這一點。
例如，使用jQuery：

$.getScript("myResource.js", function(data, textStatus, jqxhr) {
  if (jqxhr.status !== 200) {
    console.error('resource could not be loaded:', textStatus);
  }
});

或者，只需使用javascript：

var script = document.createElement("script");
script.setAttribute("type", "text/javascript")
script.setAttribute("src", "myResource.js");
if (typeof script === "undefined") {
  console.error("resource could not be loaded");
} else {
  document.getElementsByTagName("head")[0].appendChild(script);
}

Answer 4

你可以這樣做：

if ($('script[src="myResource.js"]').length > 0){
    // script is loaded
}else{
    // not loaded
}

希望能幫助到你