Vanilla JavaScript equivalent of jQuery s ready - how to call a function when the page DOM is ready for it

0 votes

With jQuery, we all know the wonderful .ready() function:

$('document').ready(function(){});

However, let's say I want to run a function that is written in standard JavaScript with no library backing it, and that I want to launch a function as soon as the page is ready to handle it. What's the proper way to approach this?

I know I can do:

window.onload="myFunction()";

Or I can use the body tag:

<body onload="myFunction()">

Or I can even try at the bottom of the page after everything, but the end body or html tag like:

<script type="text/javascript">
    myFunction();
</script>

What is a cross-browser(old/new)-compliant method of issuing one or more functions in a manner like jQuery's $.ready()?

Aug 5, 2022 in Web Development by gaurav
• 23,260 points
722 views

1 answer to this question.

0 votes

The simplest thing to do in the absence of a framework that does all the cross-browser compatibility for you is to just put a call to your code at the end of the body. This is faster to execute than an onload handler because this waits only for the DOM to be ready, not for all images to load. And, this works in every browser.

<!doctype html>
<html>
<head>
</head>
<body>
Your HTML here

<script>
// self executing function here
(function() {
   // your page initialization code here
   // the DOM will be available here

})();
</script>
</body>
</html>
answered Aug 5, 2022 by rajatha
• 7,680 points

Related Questions In Web Development

0 votes
0 answers

Javascript/Jquery - how to replace a word but only when not part of another word?

I am currently doing a regex comparison ...READ MORE

Aug 22, 2022 in Web Development by gaurav
• 23,260 points
635 views
+1 vote
1 answer

How to access the Angularjs scope of a particular html element from our console?

Hello, You should follow the below steps:-- 1.Compile and ...READ MORE

answered Jan 21, 2020 in Web Development by Niroj
• 82,880 points

edited Jan 21, 2020 by Niroj 2,906 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,520 points
1,274 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
15,577 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
23,205 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,880 points
3,268 views
0 votes
1 answer

How to create a simple map using JavaScript/JQuery

var map = new Object(); // or ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
1,320 views
0 votes
1 answer

How to cast jQuery $.ajax calls to Bluebird promises without the deferred anit-pattern

jQuery have promises implemented with their AJAX ...READ MORE

answered Aug 1, 2022 in Web Development by rajatha
• 7,680 points
506 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP