With my recent crusade against jQuery, I needed a reliable way of checking for DOM ready. As window.onload would not satisfy all scenarios, I came up with another solution.
The first version uses a procedural function, while the second one uses a callback function.
if (document.readyState !== 'loading') {
// Document is already ready, just execute code here
init();
} else if (document.addEventListener) {
//document.addEventListener("DOMContentLoaded", init);
document.addEventListener('DOMContentLoaded', function() {
// Document was not ready, place code here
init();
});
} else {
document.attachEvent('onreadystatechange', () => {
if (document.readyState !== 'loading') {
init();
}
});
}
function init() {
// Do stuff
}Second:
function onDOMReady(callback) {
if (document.readyState !== 'loading') {
callback();
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', callback);
} else { // IE <= 8
document.attachEvent('onreadystatechange', () => {
if (document.readyState === 'complete') {
callback();
}
});
}
}
onDOMReady(() => {
// do something
});In the first example, note the alternative way of calling the init() function:
I would go with the second one, as it’s more readable.
document.addEventListener("DOMContentLoaded", init);vs
document.addEventListener('DOMContentLoaded', () => {
// Document was not ready, place code here
init();
});See a JSFiddle demo.
SEO Specialist
Web Developer
https://getbutterfly.com/
https://getbutterfly.com/author/ciprian/
https://www.4property.com/author/ciprian/
https://www.linkedin.com/in/cipriangb/
Owns: getButterfly
Ciprian Popescu
Technical SEO specialist, JavaScript developer and senior full-stack developer. Owner of getButterfly.com.
If you like this article, go ahead and follow me on Twitter or buy me a coffee to support my work!
