Load JavaScript asynchronously using the most browser compatible method. The

element for each JavaScript file to be loaded asynchronously will be generated dynamically after the window load event using the following basic method:

(function() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  s.src = script.data;
  var x = document.getElementsByTagName('script')[0];
  x.parentNode.insertBefore(s, x);
})();

How to load a JavaScript file asynchronously

Using this module, you can specify a script to be loaded asynchronously in two basic ways:

By adding "async_js" => TRUE to the options array in drupal_add_js().
By calling async_js_add_js("path/to/your/script.js") which bypasses drupal_add_js(), gets you the same result, and may be a touch faster.

Additional functionality

Dependencies:

Specify dependencies at the individual script level. Simply add "async_dependencies" => array("path/to/script1.js", "path/to/script2.js") to the options array in either drupal_add_js() or async_js_add_js(). The path you use to reference the dependency must correspond exactly to the path used to actually load the dependency.

Callback functions:

Specify callback functions to be fired once the script has loaded. This can be done by adding "async_callback" => array("your_function_name", "another_function_name") to the options array in either drupal_add_js() or async_js_add_js(). All callback functions must exist in the global scope.

Fade-in effect:

When specifying a script to be loaded asynchronously, you can specify html elements to fade in after a delay and in unison. This can be done by adding "async_fade" => array(".array", "#of", ".jQuery", "#selectors") to the options array in either drupal_add_js() or async_js_add_js(). The fade-in effect will be applied universally to all elements defined in this way on a single page. The default delay is 1 second. This can be changed by editing the conf variable "async_js_timeout".

Containers:

Specify a container in which to append your script element. To do this, add "async_container" => ".jQuery #selector" to the options array in either drupal_add_js() or async_js_add_js().

Final callback:

You may add a final callback function to be fired after all asynchronous scripts have been successfully loaded by editing the "async_js_final_callback" conf variable. Your callback function must exist in the global scope.

Similar modules

Async script shim is a similar, minimally maintained module for Drupal 8.
Script.JS uses the $script.js library.
LABjs uses the LABjs library.
Advanced CSS/JS Aggregation.

Initial development sponsored by Prima Supply.

Asynchronous JavaScript

Issues

async_js project open to new maintainer applications on 5 Oct, 2021Closed: outdatedMiscellaneous Created over 3 years ago

async_js project open to new maintainer applications on 5 Oct, 2021
Closed: outdated
Miscellaneous
Created over 3 years ago