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().
NOTE: 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().
NOTE: 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.
NOTE: Your callback function must exist in the global scope.
Similar modules
Development sponsored by
Prima Supply.
Still on Drupal 7? Security support for Drupal 7 ended on 5 January 2025. Please visit our Drupal 7 End of Life resources page to review all of your options.
