Possible Duplicate:
$(document).ready equivalent without jQuery
If you have jQuery called in your page. You can simply do it:
$(document).ready(function() { /** code inside **/});
But how to do similar thing without jQuery?
4 Answers
You can use the DOMContentLoaded event.
document.addEventListener('DOMContentLoaded', function() {
// ...
});
Note that in older IEs you need workarounds, some use the readystatechange event if I recall correctly.
3 Comments
nnnnnn
Assuming you don't care about supporting older browsers...
user31782
Note that
DOMContentLoaded fires before CSSOM is loaded. So anyone using DOMContentLoaded in the absence of jQuery would have to manually trigger page reflow/repaint first.
Sebastian Simon
document. at the start is not needed. DOMContentLoaded will also trigger on window (or globalThis in general), and addEventListener(…) implies window.addEventListener(…).I think the simplest way to answer your question is to answer "How does jQuery do it?" and for that, I'd recommend looking as the source code. The most relevant part of the code is at https://github.com/jquery/jquery/blob/master/src/core.js#L423
Here's a snippet:
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
return setTimeout( jQuery.ready, 1 );
}
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", jQuery.ready, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", DOMContentLoaded );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", jQuery.ready );
// If IE and not a frame
// continually check to see if the document is ready
var toplevel = false;
try {
toplevel = window.frameElement == null;
} catch(e) {}
if ( document.documentElement.doScroll && toplevel ) {
doScrollCheck();
}
}
Comments
window.onload = function(){
// do something
}
1 Comment
alex
That isn't the same as DOM ready.
Use below script:
<script type="text/JavaScript">
function funtionToBeCalled(){
// code that will be exected after dom ready
}
window.onload=funtionToBeCalled;
</script>
Or there is one more way. Add onload event in body tag as below:
<body onload='functionToBeCalled();'>
</body>
ready()is called as soon as the DOM is ready, which might be a while before theonloadevent fires. (As you might see in the jQuery source code, that doesn't always happen, since theonloadis the fallback).