Javascriptスクリプトが非同期（Async）または非同期属性が読み込まれているかどうかを確認する方法？

Question

スクリプト（実行時）が非同期にロードされているかどうかを調べる便利な方法があるかどうかを知りたいです。

など。 スクリプトタグ：

<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

をjQueryの：

あなたは自分のかどうかを確認し、その後、ページ内のすべてのscriptの要素を選択するために、jQueryを使用することができますsrc属性は、探している属性と一致します。以下の例では、スクリプト（ロード）し、別の1（ロードされていない）の結果は、両方のケースでチェックODをお見せするためのチェックが含まれています

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

また、純粋なJavascriptを使用して、getElementsByTagName()とgetAttribute()メソッドを使用して同じことを達成することもできます。

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

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

UPDATE：以下の例あなたはjs/async.jsスクリプトがロードされ、またそれが属性asyncを持っている場合、あなたは同様のtechinqueを使用できるかどうかを確認したい場合。

のjQuery：

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

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

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

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

以下の実施例

Answer 2

あなたは、文書のソースがロードされているかどうかをテストしようとすることができます：

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

それがうまくいくかもしれないスクリプトを同期的に発射された場合しまうと、その後document.readyStateが、しかし実行時間

でcompleteかloadedではありませんあなたのスクリプトは小さいですし、ページ全体が解析される前に読み込まれるかもしれませんので、理想的な解決策ではありませんが、私の意見で言及する価値があります。

Answer 3

IEの互換性が必要な場合を除き、 lemは知られていないが広くサポートされているdocument.currentScriptプロパティを使用しています。（スクリプトがタグにない場合、コールバックまたは類似している/または何も）

は、このプロパティは、それがとりわけasync/defer属性を持っている場合、あなたに伝え、現在実行中のスクリプトのHTMLScriptElementを返します。 。

MDNの例でも、この正確なユースケースを引用している：

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