Question

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

E.g。脚本标签：

<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") }

Answer 1

除非您希望IE兼容，否则此问题的正确答案是使用鲜为人知但广泛支持的document.currentScript属性。

此属性返回当前正在执行的脚本的HTMLScriptElement（如果脚本不是标记/是回调或类似的话，则返回任何内容），它会告诉您它是否具有{{1除其他外，还有/ async个属性。

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

defer

Answer 2

您可以尝试测试是否已加载文档源：

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

它可能有效，因为如果同步触发脚本，那么document.readyState在执行时不会是complete或loaded

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

Answer 3

<强> jQuery的：

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

＆＃13;

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

＆＃13;

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

＆＃13;

纯Javascript：

或者，您可以使用纯Javascript，使用getElementsByTagName()和getAttribute()方法来实现相同的功能。示例如下：

＆＃13;

var scripts = document.getElementsByTagName('script');
var found = false;
for(var i = 0; i<scripts.length; i++)
  if(scripts[i].getAttribute('src')=='js/async.js')
    found = true;
if (found) console.log('async found');
else console.log('async not found');

var scripts2 = document.getElementsByTagName('script');
var found = false;
for(var i = 0; i<scripts.length; i++)
  if(scripts2[i].getAttribute('src')=='js/foobar.js')
    found = true;
if (found) console.log('foobar found');
else console.log('foobar not found');

＆＃13;

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

＆＃13;

更新：如果要检查js/async.js脚本是否已加载，以及是否具有属性async，则可以使用类似的技术。以下示例：

<强> jQuery的：

＆＃13;

var len = $('script').filter(function () {
    return ($(this).attr('src') == 'js/async.js' && $(this).attr('async')!== typeof undefined && $(this).attr('async') !== false);
}).length;
if (len === 0) console.log('async not found');
else console.log('async found');

＆＃13;

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

＆＃13;

纯Javascript：

＆＃13;

var scripts = document.getElementsByTagName('script');
var found = false;
for(var i = 0; i<scripts.length; i++)
  if(
    scripts[i].getAttribute('src')=='js/async.js' 
    && scripts[i].getAttribute('async')!= typeof undefined)
    found = true;
if (found) console.log('async found');
else console.log('async not found');

＆＃13;

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

＆＃13;

如何检查是否已加载Javascript脚本异步（Async）或async属性存在？

3 个答案: