domFunction
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 - http://www.brothercake.com/ -->
<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
IDof 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:
- domready.zip [1K]
Credits
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 CodingForums.com 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.
![[php]](/images/php.png "Uses PHP")