Pure 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()?

May 31, 2022 in JQuery by Edureka
• 13,690 points
2,732 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 Jun 1, 2022 by Edureka
• 13,690 points

Related Questions In JQuery

0 votes
1 answer

What is the equivalent of jQuery .hide() to set visibility: hidden

Hello Kartik, There isn't one built in but ...READ MORE

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

Twitter Bootstrap: How to see the state of a toggle button?

Hii @kartik, You can see what classes the ...READ MORE

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

How to get the children of the $(this) selector?

Hello @kartik, The jQuery constructor accepts a 2nd ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,880 points
549 views
0 votes
1 answer

How to use $(document).ready equivalent without jQuery

Hello @kartik, Using DOMContentLoaded that is supported by over ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,880 points
1,504 views
0 votes
1 answer

How to get the size of the screen, current web page and browser window?

Hello @kartik, You can get the size of ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,880 points
483 views
0 votes
1 answer

How to Get the real width and height of an image with JavaScript?

Hello, Webkit browsers set the height and width ...READ MORE

answered Nov 25, 2020 in JQuery by Niroj
• 82,880 points
653 views
0 votes
1 answer

Scroll to the top of the page using JavaScript?

The scrollTo() method of the window Interface ...READ MORE

answered Jun 10, 2022 in JQuery by gaurav
• 23,260 points
524 views
0 votes
1 answer

Get class list for element with jQuery

Use the jQuery attr() Method You can simply use the attr() method ...READ MORE

answered Jun 1, 2022 in JQuery by Edureka
• 13,690 points
6,060 views
0 votes
1 answer

jQuery fix for "Uncaught TypeError: $ is not a function" error

We can fix this error by using jQuery() . ...READ MORE

answered Jun 1, 2022 in JQuery by Edureka
• 13,690 points
5,705 views
0 votes
1 answer

jQuery UI " $("#datepicker").datepicker is not a function"

The "$(...).datepicker is not a function" jQuery ...READ MORE

answered Jun 6, 2022 in JQuery by Edureka
• 13,690 points
14,550 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