Languages
[Edit]
EN

JavaScript - document ready equivalent without jQuery

13 points
Created by:
Marcin
19490

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:

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!');
});

 

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join