A native JavaScript equivalent of jQuery’s .ready() method
Modern web browsers—including IE9 and above—provide an easy way to run scripts once DOM content is fully loaded:
document.addEventListener( 'DOMContentLoaded', function () {
// Do stuff...
}, false );
However, this isn’t a true analog for jQuery’s $( document ).ready(function()
method. If you use addEventListener
after the DOM content has already loaded, the event that it’s listening for has already happened, so the event never triggers.
Fortunately, there’s a really easy, lightweight helper method you can use instead:
var ready = function ( fn ) {
// Sanity check
if ( typeof fn !== 'function' ) return;
// If document is already loaded, run method
if ( document.readyState === 'complete' ) {
return fn();
}
// Otherwise, wait until document is loaded
document.addEventListener( 'DOMContentLoaded', fn, false );
};
// Example
ready(function() {
// Do stuff...
});
This runs immediately if the document is already loaded, and if not, waits until it is.