TIUTIUN (dot) COM
Resume Articles Projects Blog

DOM Checker or How to work with DOM before page is loaded

15 June 2006

Usually with all tool tips, dropping menus, and other DOM features we start to work when page is loaded and DOM model of page is constructed.

If we want to start to work with DOM elements BEFORE page is loaded completely, there's interval between DOM model is constructed and all images and flashes are loaded.

So, we can check in javascript - if DOM is ready, let's work with DOM elements, otherwise wait.

Usually we want to initialize a set of objects or to start a function on page load, but we depend on set of elements, that must be constructed in DOM, so we can start to work with them.

We pass to javascript DOM checking object name of function and array of ID's. For example, we want to insert a text in DIV's with id's "id_div1" and "id_div2" after page is loaded.

Firstly, you have to put the "check_dom" javascript code in the header of the page.

Then we have to indicate, which function we want to call, and which elements this function depends on.

So, we call:
  1. check_dom.add_function('our_func_name()', ['id_div1', 'id_div2']);


When DOM will be constructed and elements "id_div1" and "id_div2" will appear in DOM - our function will be called.

if there is only one element, that we want to work with, we write the following call:
  1. check_dom.add_function('our_func_name()', ['id_div1']);


At the very end of the page we need to put the following code:
  1. <script language="JavaScript" type="text/javascript">check_dom.check();</script>


This code will start the whole DOM checking procedure.

Here you see code of the javascript class:
  1. // Author: Serj Tiutiun ( tiutiun AT gmail.com )
  2. // Link: http://www.tiutiun.com/projects/check-dom
  3. // Date: 2006 Jun 15
  4. // License: GNU General Public License, version 2 (Link to GPL v2)
  5.  
  6. function class_check_dom(){}
  7.  
  8. class_check_dom.prototype = {
  9.  
  10.         arr_funcs      : [],
  11.         arr_elems      : [],
  12.         cycle_counter  : 0,
  13.         cycle_delay    : 250, // msec
  14.         max_cycle      : 60,
  15.  
  16.         add_function: function (func_name, arr_elems)
  17.         {
  18.                 this.arr_funcs.push(func_name);
  19.                 this.arr_elems.push(arr_elems);
  20.         },
  21.  
  22.         del_function: function(func_nr)
  23.         {
  24.                 this.arr_funcs.splice(func_nr, 1);
  25.                 this.arr_elems.splice(func_nr, 1);
  26.         },
  27.  
  28.         check_elems: function(arr_elems)
  29.         {
  30.                 var flag = true;
  31.                 for (var j = 0; typeof arr_elems[j] != 'undefined'; j++)
  32.                 {
  33.                         if (document.getElementById(arr_elems[j]) == null) {flag = false;}
  34.                 }
  35.                 return flag;
  36.         },
  37.  
  38.         check: function()
  39.         {
  40.             this.cycle_counter++;
  41.  
  42.         if ( (typeof document.getElementsByTagName != 'undefined'
    ) && (document.getElementsByTagName('body')[0] != null || document.body != null) )
  43.         {
  44.                         for (var i = 0; typeof this.arr_funcs[i] != 'undefined'; i++)
  45.                         {
  46.                                 if ( this.check_elems(this.arr_elems[i]) == true )
  47.                                 {
  48.                                         window.setTimeout(this.arr_funcs[i], 20);
  49.                                         this.del_function(i);
  50.                                 }
  51.                         }
  52.                 }
  53.  
  54.                 if ( (this.arr_funcs.length > 0) && (this.cycle_counter < this.max_cycle) )
  55.                 {
  56.                     setTimeout('check_dom.check()', this.cycle_delay);
  57.                 }
  58.         }
  59. }
  60.  
  61. var check_dom = new class_check_dom();


So, you can download a HTML page with a complete working example HERE



How work with DOM before page is loaded completely


Keywords: JavaScript DOM onLoad before page is loaded

(C) Serj Tiutiun ( tiutiun AT gmail.com )

2006 Jun 15