JavaScript - document ready equivalent without jQuery

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 ready method is executed read official documentation,
• ready/load events order for different elements during page loading read this article,
• how to handle ready event with jQuery read this article. 

Quick problem solution:

// ONLINE-RUNNER:browser;

function ready(callback) {
	if (document.readyState === 'complete' || document.readyState === 'interactive') {
		setTimeout(callback, 0);
	} else { // 'loading'
		var proxy = function(e) {
			if (document.readyState === 'complete' || document.readyState === 'interactive') {
				document.removeEventListener('readystatechange', proxy);
				callback();
			}
		};
		document.addEventListener('readystatechange', proxy);
	}
}

// Usage example:

ready(function(e) {
	console.log('Document is ready!');
});