How do I check when the HTML component of the DOM has loaded without using a JavaScript library?

Question

I want to detect when the <body> element finishes loading into the DOM from an external script without using an external JavaScript library. I do not want to use document.ready or window.onload because they do not fire until the entire DOM (including all external files) finishes loading.

See this: http://stackoverflow.com/questions/1235985/attach-a-body-onload-event-with-js — Mrchief, Jul 28 '11 at 21:34
`window.document.body.onload = appendST1();` calls the function immediately. Remove the `()` if you want `appendST1` to be called when the onload event fires. — ThiefMaster, Jul 28 '11 at 21:36
Since you've determined that jQuery.ready() will do what you want you could read the source to that function. — Quentin, Jul 28 '11 at 21:46
@Mrchief: I already checked that post. It doesn't apply here because the `window.onload` handler will not fire until the DOM has finished loading all external files. (See [this Mozilla developer page](https://developer.mozilla.org/en/DOM/window.onload) for details.) — Brandon Lebedev, Jul 28 '11 at 22:27
@ThiefMaster: Removing the () like you recommended didn't work. `window.document.body.onload = appendST1;` still fired before the HTML finished loading into the DOM — Brandon Lebedev, Jul 29 '11 at 00:42

Raynos · Answer 1 · 2011-07-28T21:54:23.037

0

For modern browsers use

window.addEventListener('DOMContentLoaded', function() {
    // dom is ready
}, false);

For IE8 use

window.onload = function() {
    // dom is ready
};

edited Jul 28 '11 at 21:54

answered Jul 28 '11 at 21:46

Raynos

166,823
56
351
396

@lovesh IE9. IE<9 requires using window onload – Raynos Jul 28 '11 at 21:53
@Raynos: `window.addEventListener('DOMContentLoaded', ...` will work as I need it to, but `window.onload` will not. `window.onload` is similar to `document.ready`. It will not fire until all external files have finished loading into the DOM. (See [this Mozilla developer page](https://developer.mozilla.org/en/DOM/window.onload) for details.) – Brandon Lebedev Jul 28 '11 at 22:14
1

@AlienRober what that means is that its impossible to bind to dom ready for older browsers. jQuery binds to window.onload for legacy browsers – Raynos Jul 28 '11 at 22:26
That's not true. jQuery uses 3 different fallbacks for IE, namely `window.onload`, `document.onreadystatechange`, and the cunning [`doScroll()` hack](http://javascript.nwbox.com/IEContentLoaded/) – user123444555621 Jul 30 '11 at 00:45

lovesh · Answer 2 · 2011-07-28T22:22:35.810

0

why dont you put the script right above the closing body tag

<body>
..
....

....
<script type="text/javascript".....
</script>
</body>

this makes sure that everything has been loaded

in response to the comment

put this code in the head of the document

For IE8 and older IEs

window.onload= function() {
var script=document.createElement("script");
script.src=url;            // here use the url of the script
document.body.appendChild(script);
};

for others

window.attachEventListener("DOMContentLoaded",function() {
    var script=document.createElement("script");
    script.src=url;            // here use the url of the script
    document.body.appendChild(script);
    },false);

edited Jul 28 '11 at 22:22

answered Jul 28 '11 at 21:47

lovesh

5,235
9
62
93

I know--but I'm developing the page for another user and trying to keep source HTML as clean as possible. It's actually part of a larger script, and referencing a single external file that can be cached will speed up performance a bit, too. – Brandon Lebedev Jul 28 '11 at 21:51
the `window.onload` will not fire until all external files have loaded into the DOM. (See [this Mozilla developer page](https://developer.mozilla.org/en/DOM/window.onload) for details.) To be fair, I think I've found a solution, but I can't post it yet (dern lack of reputation points). I can @comment you when I post it. – Brandon Lebedev Jul 28 '11 at 22:22

Brandon Lebedev · Accepted Answer · 2011-07-30T03:53:13.203

Here's a simple solution that works in ALL browsers:

Insert the following code above the </body> tag in the HTML:

<script type="text/javascript">
  try {
    ONLOAD()
  } catch(e) {
    ONLOADq=1
  }
</script>

MINIFIED:
<script type="text/javascript">try{ONLOAD()}catch(e){ONLOADq=1}</script>

Insert this code in the external javascript:

if ( typeof ONLOADq === 'number') {
  ONLOAD()
};

Place all the code in the external javscript that needs to be run on the page's load into a function called ONLOAD. For example:
```
function ONLOAD() { document.body.appendChild(ST1) };
```

The first part covers instances when the external javascript finishes loading before the HTML, and the second part, vice-versa.

How do I check when the HTML component of the DOM has loaded without using a JavaScript library?

3 Answers3