You are here

README.txt in Asynchronous JavaScript 8

Same filename and directory in other branches
  1. 7 README.txt
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:

1. By adding "async_js" => TRUE to the options array in drupal_add_js().
2. 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

In addition to loading scripts asynchronously, this module includes the
following functionality:

- Dependencies: Specify dependencies at the individual script level. Simply add
the following key/value pair to the options array in either drupal_add_js() or
async_js_add_js().

  "async_dependencies" => array("path/to/script1.js", "path/to/script2.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 the following key/value pair to the
options array in either drupal_add_js() or async_js_add_js(). 

  "async_callback" => array("your_function_name", "another_function_name")

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 the following key/value pair to the options array in either
drupal_add_js() or async_js_add_js().

  "async_fade" => array(".array", "#of", ".jQuery", "#selectors")

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 the following key/value pair to the options array in either
drupal_add_js() or async_js_add_js().

  "async_container" => ".jQuery #selector"

- 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.
(https://drupal.org/project/async_script_shim)

- Script.JS uses the $script.js library. (https://drupal.org/project/scriptjs)

- LABjs uses the LABjs library. (https://drupal.org/project/labjs)

- Advanced CSS/JS Aggregation. (https://drupal.org/project/advagg)

File

README.txt
View source
  1. Load JavaScript asynchronously using the most browser compatible method. The
  2. element for each JavaScript file to be loaded asynchronously will be generated
  3. dynamically after the window load event using the following basic method:
  4. (function() {
  5. var s = document.createElement('script');
  6. s.type = 'text/javascript';
  7. s.async = true;
  8. s.src = script.data;
  9. var x = document.getElementsByTagName('script')[0];
  10. x.parentNode.insertBefore(s, x);
  11. })();
  12. ### How to load a JavaScript file asynchronously
  13. Using this module, you can specify a script to be loaded asynchronously in two
  14. basic ways:
  15. 1. By adding "async_js" => TRUE to the options array in drupal_add_js().
  16. 2. By calling async_js_add_js("path/to/your/script.js") which bypasses
  17. drupal_add_js(), gets you the same result, and may be a touch faster.
  18. ### Additional functionality
  19. In addition to loading scripts asynchronously, this module includes the
  20. following functionality:
  21. - Dependencies: Specify dependencies at the individual script level. Simply add
  22. the following key/value pair to the options array in either drupal_add_js() or
  23. async_js_add_js().
  24. "async_dependencies" => array("path/to/script1.js", "path/to/script2.js")
  25. NOTE: The path you use to reference the dependency must correspond exactly to
  26. the path used to actually load the dependency.
  27. - Callback functions: Specify callback functions to be fired once the script
  28. has loaded. This can be done by adding the following key/value pair to the
  29. options array in either drupal_add_js() or async_js_add_js().
  30. "async_callback" => array("your_function_name", "another_function_name")
  31. NOTE: All callback functions must exist in the global scope.
  32. - Fade-in effect: When specifying a script to be loaded asynchronously, you can
  33. specify html elements to fade in after a delay and in unison. This can be done
  34. by adding the following key/value pair to the options array in either
  35. drupal_add_js() or async_js_add_js().
  36. "async_fade" => array(".array", "#of", ".jQuery", "#selectors")
  37. The fade-in effect will be applied universally to all elements defined in this
  38. way on a single page. The default delay is 1 second. This can be changed by
  39. editing the conf variable "async_js_timeout".
  40. - Containers: Specify a container in which to append your script element. To do
  41. this, add the following key/value pair to the options array in either
  42. drupal_add_js() or async_js_add_js().
  43. "async_container" => ".jQuery #selector"
  44. - Final callback: You may add a final callback function to be fired after all
  45. asynchronous scripts have been successfully loaded by editing the
  46. "async_js_final_callback" conf variable. NOTE: Your callback function must
  47. exist in the global scope.
  48. ### Similar modules
  49. - Async script shim is a similar, minimally maintained module for Drupal 8.
  50. (https://drupal.org/project/async_script_shim)
  51. - Script.JS uses the $script.js library. (https://drupal.org/project/scriptjs)
  52. - LABjs uses the LABjs library. (https://drupal.org/project/labjs)
  53. - Advanced CSS/JS Aggregation. (https://drupal.org/project/advagg)