>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #1971070. --> Reported by: [chasingmaxwell](https://www.drupal.org/user/584974) >>> <p>project page: <a href="http://drupal.org/sandbox/chasingmaxwell/1970290">http://drupal.org/sandbox/chasingmaxwell/1970290</a><br> git rep: <a href="http://git.drupal.org/sandbox/chasingmaxwell/1970290.git">http://git.drupal.org/sandbox/chasingmaxwell/1970290.git</a></p> <p>Load JavaScript asynchronously using the most browser compatible method. The </p> <script> element for each JavaScript file to be loaded asynchronously will be generated dynamically after the window load event using the following basic method: <pre>(function() {<br />&nbsp; var s = document.createElement(&#039;script&#039;);<br />&nbsp; s.type = &#039;text/javascript&#039;;<br />&nbsp; s.async = true;<br />&nbsp; s.src = script.data;<br />&nbsp; var x = document.getElementsByTagName(&#039;script&#039;)[0];<br />&nbsp; x.parentNode.insertBefore(s, x);<br />})(); <h2>How to load a JavaScript file asynchronously Using this module, you can specify a script to be loaded asynchronously in two basic ways: <ol> <li>By adding "async_js" => TRUE to the options array in drupal_add_js(). <li>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. <h2>Additional functionality In addition to loading scripts asynchronously, this module includes the following functionality: <ol> <li><strong>Callback functions: Specify a callback function to be fired once the script has loaded. This can be done either by specifying "async_callback" => "your_function_name" in drupal_add_js() or with async_js_add_js("path/to/your/script.js", "your_function_name"). Your callback function must exist in the global scope. <li><strong>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 either by specifying "async_fade" => array(".array", "#of", ".jQuery", "#selectors") in drupal_add_js() or with async_js_add_js("path/to/your/script.js", "your_function_name", array(".array", "#of", ".jQuery", "#selectors")). The default delay is 1 second. This can be changed by editing the conf variable "async_js_timeout". NOTE: The fade-in effect will be applied universally to all elements defined in this way on a single page. <li><strong>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. <h2>Similar modules <ul> <li><a href="http://drupal.org/project/async_script_shim" title="Async script shim">Async script shim is a very similar module for Drupal 8. It does not support callbacks or fade-in effects. <li><a href="http://drupal.org/project/scriptjs" title="Script.JS drupal project">Script.JS uses the <a href="http://dustindiaz.com/scriptjs" title="$script.js script loading library">$script.js library and loads all scripts asynchronously rather than allowing you to specify scripts. <li><a href="http://drupal.org/project/headjs" title="HeadJS drupal project">HeadJS uses the <a href="http://headjs.com/" title="HeadJS script loading library">HeadJS library and loads all scripts asynchronously rather than allowing you to specify scripts. </script>