How to Load External JavaScript Asynchronously or Dynamically

JavaScript makes more easier to manipulate websites, now a days most of the browsers supporting JavaScript codes. When the HTML parser encounters a <script> element, by default, run the script before it can parsing and rendering the document. It is not much problem for inline scripts but if the script source code is in an external file specified with a src attribute, the portions of the document that follow the Script will not appear in the browser until the script has been downloaded and executed.This makes loading of the website much slower, which makes bad user experience for your website and may not also indexing of your website by the search engines.

This Synchronous or blocking script execution is the default only. The <script> tag can have defer and async attributes, which cause scripts to be executed differently. This makes your website loading much faster than before and appears contents of your site by loading at first.

Loading JavaScript Asynchronously using async or defer attributes

Both the defer and acync attributes are ways of telling the browser that the linked script does not use document.write() and won't be generating document content, and that therefore the browser can continue to parse and render the document while downloading the script. You can use async or defer attributes as the following.

<script defer src="deferred.js"></script> 
<script async src="async.js"></script>

The defer attribute causes the browser to defer execution of the script until after the document has been loaded and parsed and is ready to be manipulated. The async attribute causes the browser to run the script as soon as possible but not to block document parsing while the script is being downloaded. If a <script> tag has both attributes, a browser that supports both will honor the async attribute and ignore the defer attribute. Deferred scripts run in the order in which they appear in the document, while acync scripts run as they load, which means that they may execute out of order.

Here is an example of acync script uses in this blog for Intensedebate comments script source.

<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

Loading JavaScript Asynchronously by loading scripts dynamically

You can load and execute scripts asynchronously, even in browsers that do not support the async attribute, by dynamically creating a <script> element and inserting it into the document. Here is an example how to load scripts dynamically.

function loadasync(url){
var head=document.getElementByTagName("head")[0]; 
var s=document.createElement("script"); 
s.src=url;
head.appendchild(s);
}

This loadsaync() function finds the <head> tag and attach <script> tag below opening of head tag and loads scripts dynamically. Scripts that are neither included inline within the web page or referenced statically from the web page are loaded into the document and become part of the running JavaScript program.

You can use the following method to execute loadsync() function, when document finished loading.

function loadasync(){ ..................}
request.onreadystatechange=loadasync;

Here is an example of loading JavaScript asynchronously by loading scripts dynamically used in this blog for external scripts from infolinks ads.

<div style='display:none'>  <div id='adsource-0'>
<script type='text/javascript'>
var infolinks_pid = 9993182;
var infolinks_wsid = 1;
</script>
    <script language='javascript' src='http://resources.infolinks.com/js/infolinks_main.js' type='text/javascript'/>
  </div>
</div>
<script type='text/javascript'>
    source = document.getElementById("adsource-0");
    placeholder = document.getElementById("ad-0");
    placeholder.appendChild(source);
</script>

I have placed this code at the bottom of HTML codes, i.e. just before </body> tag and have placed the following code where I want to display ads.

<div id="ad-0" align="center"></div>

Loading JavaScript Asynchronously when document finishes loading

You can load and execute scripts asynchronously by using setTimeout(), addEventListner(), and attachEvent(). Most objects that can be event targets have a method named addEventListner(), which allows the registration of multiple listeners.

window.addEventListner("load", function(){.....},false);
request.addEventListner("readystatechange", function(){......},false);

The first argument to this function is the name of the event. For IE8 and earlier, you must use a similar method, named attachEvent().

window.attachevent("onload", function() {.....});

Here is an example which define an onLoad() function that registers a function to be run when the document finishes loading. If the document has already loaded, run it asynchronously.

function onLoad(f){
if(onLoad.loaded) 
 window.setTimeout(f,0); 
elseif (window.addEventListner)
 window.addEventListner("load",f,false);
elseif (window.attachEvent)
 window.attachEvent("onload",f);
}

onLoad.loaded=false;

onLoad(function(){onLoad.loaded=true;});

In the above script window.attachEvent is used for IE8 and earlier. onLoad.loaded=false; sets a flag that indicates the document is not loaded yet and onLoad(function(){onLoad.loaded=true;}); register a function to set the flag when the document does load.

Intro Posts