如何检查是否已加载Javascript脚本异步(Async)或async属性存在?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何检查是否已加载Javascript脚本异步(Async)或async属性存在?相关的知识,希望对你有一定的参考价值。

我想知道是否存在一种方便的方法来检查脚本(执行时)是否异步加载。

例如。脚本标签:

<script async type="text/javascript" src="js/async.js"></script>

脚本async.js:

if (_condition_to_check_if_this_has_been_loaded_async) { console.log("async: true") }
答案

除非你想要IE兼容性,否则这个问题的正确答案是使用鲜为人知但广泛支持的document.currentScript属性。

此属性返回当前正在执行的脚本的htmlScriptElement(如果脚本不在标记中,则没有任何内容/回调或类似),它会告诉您它是否具有async / defer属性等。

MDN示例甚至引用了这个确切的用例:

if (document.currentScript.async) {
  console.log("Executing asynchronously");
} else {
  console.log("Executing synchronously");
}
另一答案

您可以尝试测试是否加载了文档源:

if (document.readyState == "complete" || document.readyState == "loaded") {
     // script was fired async
} else {
    // script was sync
}

它可能会起作用,因为如果同步触发脚本,那么document.readyState在执行时将不会是completeloaded

但是,如果您的脚本很小,那么它可能会在整个页面被解析之前加载,因此它不是一个理想的解决方案,但在我看来值得一提

另一答案

jQuery的:

您可以使用jQuery选择页面中的所有script元素,然后检查它们的src属性是否与您要查找的属性相匹配。下面的示例包含对您的脚本(已加载)和另一个(未加载)的检查,以显示两种情况下的结果:

var len = $('script').filter(function () {
    return ($(this).attr('src') == 'js/async.js');
}).length;
if (len === 0) console.log('async not found');
else console.log('async found');
var len = $('script').filter(function () {
    return ($(this).attr('src') == 'js/foobar.js');
}).length;
if (len === 0) console.log('foobar not found');
else console.log('foobar found');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async type="text/javascript" src="js/async.js"></script>

以上是关于如何检查是否已加载Javascript脚本异步(Async)或async属性存在?的主要内容,如果未能解决你的问题,请参考以下文章

检查 Bootstrap Datepicker 脚本是不是已加载

页面完全加载后如何执行功能?

javascript脚本如何异步加载,有啥作用

如何检查图片是不是已完全加载?

javascript 检查CSS是否已加载

如何检查是不是已加载 Google Maps API?