Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
This project is not covered by Drupal’s security advisory policy.
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
- 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.
Supporting organizations:
sponsored time for support and maintenance.
Project information
- Seeking new maintainer
The current maintainers are looking for new people to take ownership. - No further development
No longer developed by its maintainers. - Module categories: Developer Tools
- 168 sites report using this module
- Created by chasingmaxwell on , updated
- This project is not covered by the security advisory policy.
Use at your own risk! It may have publicly disclosed vulnerabilities.
Releases
7.x-1.0-alpha0
released 23 November 2013
Works with Drupal: 7.x
✓ Recommended by the project’s maintainer.
Development version: 7.x-1.x-dev updated 17 Mar 2016 at 02:34 UTC