WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

jQuery $(document).ready() Equivalent in JavaScript

Topic: JavaScript / jQueryPrev|Next

Answer: Use the DOMContentLoaded Event

You can utilize the JavaScript Window's DOMContentLoaded event to construct $(document).ready() equivalent without jQuery. This event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Let's take a look at the following example to understand how it works:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>$(document).ready() Equivalent without jQuery</title>
  • <script>
  • document.addEventListener("DOMContentLoaded", function(){
  •     // Apply some style on paragraph
  •     document.getElementsByTagName("p")[0].style.background = "yellow";
  •     
  •     console.log("DOM has been fully loaded and parsed.");
  • });
  • </script>
  • </head>
  • <body>
  •     <h1>This is a heading</h1>
  •     <p>This is a simple paragraph of text.</p>
  • </body>
  • </html>

Note that the DOMContentLoaded is different from load event which is fired when the whole page has loaded. The load event should only be used when you want to detect a fully-loaded page including all the dependent resources such as CSS, images, etc.


Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates

Your Feedback:

We would love to hear from you, please drop us a line.