html - How to check if an Javascript script has been loaded Asynchronously (Async) or async attribute is present? - Stack Overfl

admin管理员组

文章数量:1356280

I would like know if there exists a handy way to check if an script (on execution) has been loaded asynchronously.

E.g. the script tag:

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

the script async.js:

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

I would like know if there exists a handy way to check if an script (on execution) has been loaded asynchronously.

E.g. the script tag:

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

the script async.js:

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

• javascript
• html
• dom
• asynchronous
• callback

Share Improve this question Follow asked Jul 14, 2016 at 9:10 Angel Humberto VargasAngel Humberto Vargas 12211 silver badge77 bronze badges 3

• Is that async.js your script or some script you do not have access to and cannot modify? – Angelos Chalaris Commented Jul 14, 2016 at 9:12
• Angelos yes, is my script. – Angel Humberto Vargas Commented Jul 14, 2016 at 9:14
• You could define a variable to check for from the other script or you can do what I suggest in my answer as a general case. Hope that was helpful to you! :) – Angelos Chalaris Commented Jul 14, 2016 at 9:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Unless you want IE patibility, the correct answer to this problem is using the little-known but widely supported document.currentScript property.

This property returns the HTMLScriptElement of the script currently being executed (or nothing if the script isn't in a tag/is a callback or similar), which tells you if it has the async/defer attributes, among other things.

The MDN example even cites this exact use-case:

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

you can try to test if document source is loaded:

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

it might work because if script is fired synchronously then document.readyState won't be plete or loaded at the execution time

however, if your script is small then it might load before the whole page was parsed, so it is not an ideal solution, but worth mentioning in my opinion

jQuery:

You can use jQuery to select all script elements in the page, then check if their src attribute matches the one you are looking for. Example below contains a check for your script (loaded) and another one (not loaded) to show you the results od checking in both cases:

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async type="text/javascript" src="js/async.js"></script>

Pure Javascript:

Alternatively, you can use pure Javascript, utilising the getElementsByTagName() and getAttribute() methods to achieve the same thing. Example below:

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: If you want to check if the js/async.js script has been loaded and also if it has the attribute async, you can use a similar techinque. Examples below:

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async type="text/javascript" src="js/async.js"></script>

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

本文标签：