Why you should stop using onload method.

Onload
Onload

It is amazing that many web developers still use onload method embedded in the BODY tag, like


 <HEAD>
 <BODY onload="document.contact.userID.focus();">
  <form name="contact">
   <input type="text" name="userID" >
  </form>
  </BODY>
 </HEAD>

There are two problems with this line of code.

  1. Embedding code (behavior) with HTML (structure) makes it difficult to maintain the page.
  2. onload() method will executes only after the page is fully displayed.

    3. Let’s see how to fix these problems.
    Fixing problem # is quite simple. Just move your JavaScript code to the header section of you HTML page.

    
<HTML>
<HEAD>
<script language="javascript">
function setFocus(){
	document.contact.userID.focus();
}
</script>
</HEAD>
<BODY onload="setFocus();">
<form name="contact">
<input type="text" name="userID" >
</form>
</BODY>
</HTML>

    Even better approach would be to move the code to an external Javascript file and add a reference to that file in the header section of the HTML document. For example, if the code is in script.js you can import the code like

    
<HTML>
<HEAD><script language="javascript" ref="scripts/script.js">
</HEAD>
<BODY onload="setFocus();">
<form name="contact">
<input type="text" name="userID" >
</form>
</BODY><
/HTML>

    This approach will make your HTML code clutter-free and the code will be more manageable. But this does not address the fact the there is a delay in the exectuion of the code. onload method executes after the page is completely loaded. For instance, if you want to set focus to a text field on your web page using onload method, the foucs will be set after the page is completly downloaded.

    If your web page is a simple text page with no images or multimedia elements then using onload might be OK. However, nowadays almost all web pages have at least few images, some even have embedded audio, video, Flash or other rich multimedia resources. These large resources take considerably long time to be fully loaded. And until all the content of the page is fully downloaded and the DOM tree is constructed, onload will not be fired.

    Set focus to the text field without onload:

    There is nothing wrong with the onload method, the problem is the large size of page elements that need to be downloaded by the browser. The browser needs to construct the DOM tree, load all the images and other multi-media resources and when everything is done then it will execute the onload method. A DOM tree is constructed instantly by the browser, but the large size of other elements take a while to be fully loaded. It means these external multilmedia files keep browser from executing the code triggred my onload event. The best approach would be to wait just long enough to let browser contstuct the DOM tree and then execute your code without waiting for all the objects to be completely downloaded. This can be done by using jQuery's ready() function.

    
  <script type="text/javascript" src="scripts/jquery-1.3.2.min.js">
  </script>
    <script type="text/javascript">
      jQuery(document).ready(function() {
        document.contact.userID.focus();
      });
    </script>

    or more formally.

    
$(function(){
	document.contact.userID.focus();
}

    So now your HTML code will be like

    
 <HTML>
 <HEAD>
  <script type="text/javascript" src="scripts/jquery-1.3.2.min.js">
  </script>
    <script type="text/javascript">
      jQuery(document).ready(function() {
        document.contact.userID.focus();
      });
    </script>
 </HEAD>
 <BODY >
 <form name="contact">
 <input type="text" name="userID" >
 </form>
 </BODY>
 </HTML>

    Now our JavaScript code will be executed as soon as the DOM is fully constructed, without waiting for images and other multimedia resources. In this example the focus will be set to your input text field almost instantly and user can start typing in the information without waiting for rest of the page to be downloaded. This is a simple but effective way of improving your website's usability.