EN
JavaScript - document ready equivalent without jQuery
16 points
In this article, we're going to have a look at how to make $(document).ready(...) method equivalent in pure JavaScript. The method is called when DOM is ready to make some manipulations. There are three states that web page can be in: loading, interactive and complete - ready event is executed in last both.
To get better knowledge about:
- when
readymethod is executed read official documentation, ready/loadevents order for different elements during page loading read this article,- how to handle
readyevent with jQuery read this article.
Quick problem solution:
xxxxxxxxxx1
function ready(callback) {2
if (document.readyState === 'complete' || document.readyState === 'interactive') {3
setTimeout(callback, 0);4
} else { // 'loading'5
var proxy = function(e) {6
if (document.readyState === 'complete' || document.readyState === 'interactive') {7
document.removeEventListener('readystatechange', proxy);8
callback();9
}10
};11
document.addEventListener('readystatechange', proxy);12
}13
}14
15
// Usage example:16
17
ready(function(e) {18
console.log('Document is ready!');19
});
