Version 1.1 - 22nd April 2005

domFunction is an easy-to-use helper script, that allows other DOM scripting to run before window.onload; the practical benefit is that javascript doesn't have to wait for images or other dependencies to finish loading anymore - it can begin as soon as the DOM is ready :^)

It works in all DOM-capable browsers except Mac/IE5, Safari 1.0, or KDE <3.2 (with javascript enabled):

The demos use an alert() dialogue to show the test function being called, while a large BMP image loads in the background. If scripting (or this script) is not supported, the alert() won't happen.

Get the script

Download the zipfile [2K], unzip it into your site directory and include the script on your page - it can go anywhere, but if it's going to call other functions it must come after them in the source code:

<!-- domFunction constructor by brothercake - -->
<script type="text/javascript" src="domFunction.js"></script>

Then use the object constructor to define individual functions. You can either call a named function:

var foobar = new domFunction(myFunction);

Or write an anonymous function directly inside the constructor:

var foobar = new domFunction(function()
    //code ...


The function will be called once the DOM is ready (determined by the existence of the getElementsByTagName method and the presence of the <body> element; this is the point at which you can safely use DOM methods, including creating and appending new elements to the <body>).

You can treat it essentially the same as a regular onload function except that - if you're going to manipulate (eg, read from or append to) any existing HTML elements other than the body, you must also test for those elements before calling your script.

And for this purpose the constructor takes an optional second argument - an object-literal which defines the elements or collections that the script should test before trying to call the function:

var foobar = new domFunction(function()
    //code ...

}, { 'poster' : 'id', 'h1' : 'tag' });

Each name/value pair should be either:

  • the ID of an element, followed by the value "id", to test whether that element exists; or
  • the tag name of an element, followed by the value "tag", to test whether that collection has any members.

So what happened to domReady?

domReady is the original procedural code from which the domFunction constructor was derived. It's essentially the same code but with a different structure, yet simply by virtue of this difference, the browser exceptions no longer exist:

But domReady is nothing like as neat and easy-to-use as domFunction - the latter was designed as a mass-use encapsulated helper script, where domReady was really just proof-of-concept. Although the loss of some browsers is infortunate in one sense, it may be helpful in another - since they're among the builds you often have to except manually anyway ...

But still, if you need to support those builds, here's the original code:


The idea is very simple, and the code very short, but it's been through a great deal of tweaking and refining to get to this stable point, and I'm indebted to those who contributed to the thread at in which I originally proposed this technique.

I'm particularly grateful to one member, fci, who's idea it was to restructure the code as an OO constructor. I also doff my hat to Bruno Torres, who's email feedback for Invasion of the Body Switchers kick-started the development of this technique in the first place.

Get the script

BSD License → Terms of use


German translation (Translated by A.Romanova)

domFunction ist eine leicht-zu-bedienend Hilfsskript, die anderem DOM Skript erlaubt, vorher window.onload zu laufen ...

Belorussian translation (Translated by Marina)

domFunction з’яўляецца простым ў порцыі-дапаможны скрыпт, які дазваляе іншым DOM сцэнары для запуску перад window.onload ...



Website gadgets

Bits of site functionality:

Usability widgets

Local network apps

Web-applications for your home or office network:

Game and novelties

Our internal search engine is currently offline, undergoing some configuration changes in preparation for a major site overhaul. In the meantime, you can still search this site using Google Custom Search.

In this area

Main areas

[brothercake] a round peg in a square hole, that still fits