Skip to content

jQuery document.ready in Vanilla JavaScript

Using vanilla JavaScript with no jQuery, the simplest way to check if the document is ‘ready’ to be manipulated is using the DOMContentLoaded event:

document.addEventListener('DOMContentLoaded', function () {
  // do something here ...
}, false);
Code language: JavaScript (javascript)

You can also use a named function instead of an anonymous function:

document.addEventListener('DOMContentLoaded', doSomething, false);

function doSomething () {
  // code here...
Code language: JavaScript (javascript)

The vanilla JavaScript DOMContentLoaded event is fired when the DOM is ready, but there could still be resources that are being loaded (e.g. images, external stylesheets, etc). If you want to instead start manipulating elements when the full page has loaded, you can use the load event. But note that this event needs to attach the event to the window instead of the document (the document doesn’t have a load event):

window.addEventListener('load', function () {
  // do something here ...
}, false);
Code language: JavaScript (javascript)

One of the above should suffice to allow you to do a jQuery-like $(document).ready() in all modern browsers with plain JavaScript. But if you want support going back to old browsers, including IE9, you can use the following:

function ready(fn) {
  if (document.readyState !== 'loading'){
  } else {
    document.addEventListener('DOMContentLoaded', fn);

ready(function () {
  // do something here...
Code language: JavaScript (javascript)

Finally, if you want even older browser support, including IE8 and below, you would need to do something like this (which also works in modern browsers):

document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    // do something here...
Code language: JavaScript (javascript)
Note: To the best of our knowledge, the information above and the snippet are accurate and up to date. However, in case you notice something wrong, please report snippet or leave a comment below.
View all Snippets
Louis Lazaris

Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...