Javascript：在document.onload之前访问DOM

Question

I have a page which has document.body.onload=function(){...} but this is suffering delays because the document also contains external <img> tags etc; onload seems to be only getting fired after these external sites have delivered some kind of response.

I put the code in onload because I thought the DOM tree wasn't fully available until then (eg document.getElementById(x) might return null if it is called too soon).

Is there an event which triggers after everything in the DOM is accessible, but before everything has been loaded?

Answer 1

You can just place your <script> tag at the end of the body since the html is parsed in sequence.

Additionally, you could look at jquery 's document.ready. Even if you don't want to use jquery, you can have a look at how they handle it. ready does exactly what you're asking for.

Answer 2

Sure you can:

Maybe you have two options:

1) by using jQuery: with $(document).ready() , you can get your events to load or fire or whatever you want them to do before the window loads.

2) DOMContentLoaded Reference: https://developer.mozilla.org/en/DOM/DOM_event_reference/DOMContentLoaded

function checkDom(yourFunc)
{
     window.addEventListener('DOMContentLoaded', yourFunc);
}

Answer 3

You should consider if you really need the whole document loaded. As long as your libraries are already loaded and the DOM nodes you are interested in are on the page, you can act immediately. This sort of code makes a page "come alive" much faster than one that waits for every last resource to load:

<form name="foo">
    <!-- ... -->
</form>
<script>
    var form = new My.FormWidget(document.forms.foo);
</script>

This has the added benefit of forcing you to encapsulate logic in the FormWidget (you should want to keep an "inline" script like that as brief as possible).