DomReady

May 31st, 2008

DomReady has been starting to become all the craze lately with the language Javascript to use for HTML pages. But what is it? DomReady allows you manipulate with all the elements on the HTML page before the entire page loads. What use can this be if you can just use window.onload instead? Well, imagine a large site like MySpace.com, or IGN.com, which have a lot of flashy banner ads and images to load. My guess for the entire page to load can take ~10 seconds, assuming we are on a fast connection speed to the Internet, respectively. That isn’t bad, most of us can wait 10 seconds for a page to load if it’s our favorite site to visit. But for some users who don’t have a high speed Internet, they will have to wait a lot longer for the page to load, and therefore the Javascript window.onload function won’t be executed until it takes it sweet time to load.

Let me explain by example and code. My Blog site has a huge picture of my face in the top right corner, sorry you have to look at it – just scroll the page down and you don’t have to see my face if it bothers you. Assuming you were on a slow Internet connection, this page can take some time to load. On this blog I have a what is called a “TabAware” script that allows guests and users to hit the TAB key when they leave a reply. This can be useful if guests or users want to post some code back to me to share some tips or secrets on code, or just to tell me that I was doing something incorrectly in my scripts. I also wanted the TabAware script to execute before the guest or user had to wait for the page finish loading. If you look at the source code on this page, you will see my quick DomReady method. However, it isn’t in a function. Lets take my script and put it in a useful function which allows you to use the DomReady function however many times we choose to do so.

[js]
function DomReady(ftn) {
var timeout = 0;
var setInt = setInterval(function() {
timeout++;
var html = document.getElementsByTagName(“HTML”)[0];
html = html.innerHTML.toLowerCase();
if(html.lastIndexOf(“”) > 0) {
ftn();
clearInterval(setInt);
}
if(timeout > 150) {
clearInterval(setInt);
}
}, 100);
}
[/js]

1. Create the function DomReady
2. Declare a variable called “timeout”. This will be used later in the setInterval to stop the script if we need to.
3. Declare a variable called “setInt” which holds the setInterval function.
4. Increment the timeout value one
5. Declare variable “html” which gets the tags “HTML” inside of the current document. I have “HTML” all caps because Internet Explorer will capitalize some html elements.
6. Set the “html” variable to contain all the innerHTML we have written for our page, and make it all lower case.
7. Simple “if” statement to check if the html variable has reached the end of the “body” tag in our html page.
8 – 9. Execute the function passed to the DomReady function to begin with, clear the setInterval we began.
11 – 12. If the “timeout” variable reaches 150, we stop the Domready script. The reason we do is so we don’t keep running the script infinite amount of times. This rarely will happen unless you forget to put a closing body tag in your page.
14. How many milliseconds offset we should run our setInterval

Here is a sample usage on how you go about to execute the DomReady function

[js]
DomReady(function() {
alert(“DOMREADY”);
});

// or

function myStartUpFunction() {
alert(“DOMREADY”);
}
DomReady(myStartUpFunction);
[/js]

Hope you have fun with this small script. It can turn out to be very useful for large scaled projects. In a couple of weeks I will discuss several suggestions on how to set up file structures for websites.

Javascript > Website

One Response to “DomReady”

  1. Thumper's Says:

    Thumper’s Blog…

    Very nice post. I’d like to link back to it from my new blog. Thanks….