CODEWITHSUNDEEP
javascripthtmldomasynchronouscallback
Angel Humberto Vargas
Angel Humberto Vargas

Reputation: 122

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

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

Upvotes: 5

Views: 6673

Answers (3)

GregRos
GregRos

Reputation: 9113

Unless you want IE compatibility, 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");
}

Upvotes: 4

pwolaq
pwolaq

Reputation: 6381

you can try to test if document source is loaded:

if (document.readyState == "complete" || 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 complete 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

Upvotes: 1

Angelos Chalaris
Angelos Chalaris

Reputation: 6757

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.com/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.com/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>

Upvotes: 0

Related Questions