Can someone point me in the direction to hook the DOM loaded event?
Basically, i want to display a loader while the dom is loading (I dont mean Ajax requests- the first time a user hits a page) ?
Thanks all in advance
All of the popular Javascript libraries have a "DOM loaded" event you can use for this.
Essentially:
<html>
<head>
<script>
// if using jQuery
$(document).ready(function() { $('#loading').hide(); });
// if using Prototype
document.observe("dom:loaded", function() { $('loading').hide(); });
</script>
</head>
<body>
<div id="loading">Loading...</div>
<!-- rest of page -->
</body>
</html>
If you're not using a framework, use the DOMContentLoaded event:
document.addEventListener('DOMContentLoaded', function() {
// ...
})
Just to provide an alternative to jQuery, YUI Event provides an onDomReady() function for this purpose as well. Here's the example from their site:
<script type="text/javascript">
function init() {
YAHOO.util.Dom.setStyle("hidden_element", "visibility", "");
}
YAHOO.util.Event.onDOMReady(init);
</script>
The proper way to do this without a library (and really, even with a library, since you're dealing with script blocking and IE unpredictability) is to put a script at the very end of the page:
onLoaded = function(){ ... }onLoaded()
来源：https://stackoverflow.com/questions/582437/how-to-hook-the-dom-loaded-event