Languages
[Edit]
EN

JavaScript - document ready equivalent without jQuery

13 points
Created by:
Marcin
2477

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

 

Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.