How can I implement my own document ready functionality without using jQuery

0 votes
I have a script that uses $(document).ready, but it doesn't use anything else from jQuery. I'd like to lighten it up by removing the jQuery dependency.

How can I implement my own $(document).ready functionality without using jQuery? I know that using window.onload will not be the same, as window.onload fires after all images, frames, etc. have been loaded.
Apr 28, 2020 in JQuery by kartik
• 37,490 points
283 views

1 answer to this question.

0 votes

Hello @kartik,

 There are three options:

  1. If script is the last tag of the body, the DOM would be ready before script tag executes
  2. When the DOM is ready, "readyState" will change to "complete"
  3. Put everything under 'DOMContentLoaded' event listener

onreadystatechange

  document.onreadystatechange = function () {
     if (document.readyState == "complete") {
     // document is ready. Do your stuff here
   }
 }

DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() {
   console.log('document is ready. I can sleep now');
});

Concerned about stone age browsers: Go to the jQuery source code and use the ready function. In that case you are not parsing+executing the whole library you're are doing only a very small part of it.

Thank You!!

answered Apr 28, 2020 by Niroj
• 82,560 points

Related Questions In JQuery

0 votes
1 answer

How can I select an element with multiple classes in jQuery?

Hello @kartik, If you want to match only ...READ MORE

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

How do I iterate through children elements of a div using jQuery?

Hello @kartik, Use children() and each(), you can optionally pass a ...READ MORE

answered Oct 4, 2020 in JQuery by Niroj
• 82,560 points
830 views
0 votes
1 answer

How can I determine the direction of a jQuery scroll event?

Hello @kartik, Check current scrollTop vs previous scrollTop var lastScrollTop = 0; $(window).scroll(function(event){ ...READ MORE

answered Nov 24, 2020 in JQuery by Niroj
• 82,560 points
47 views
0 votes
1 answer

How can I convert a DOM element to a jQuery element?

Hello, Use this: var elm = document.createElement("div"); var jelm = ...READ MORE

answered Nov 25, 2020 in JQuery by Niroj
• 82,560 points
66 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,560 points
5,576 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,560 points
645 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,560 points
493 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,560 points
6,164 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,560 points
62 views
0 votes
1 answer

How can I refresh a page with jQuery?

Hello @kartik, Use location.reload(): $('#something').click(function() { location.reload(); }); The reload() function ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,560 points
60 views