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 in JQuery by kartik
• 11,890 points
24 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 by Niroj
• 23,950 points

Related Questions In JQuery

0 votes
1 answer

How can you disable scroll bars in the jQuery UI dialog box?

Hello @kartik, I solved the problem like this: .dialog({ ...READ MORE

answered May 29 in JQuery by Niroj
• 23,950 points
29 views
0 votes
1 answer

How to convert form data to JavaScript object with jQuery?

Hello @kartik, You can use: function form_to_json (selector) { ...READ MORE

answered Apr 28 in JQuery by Niroj
• 23,950 points
39 views
0 votes
1 answer

How to check if a jQuery plugin is loaded?

Hello @kartik, for the plugins that doesn't use ...READ MORE

answered Apr 28 in JQuery by Niroj
• 23,950 points
18 views
0 votes
1 answer

How to pass parameters in GET requests with jQuery?

Hello, Here is the syntax using jQuery $.get $.get(url, data, ...READ MORE

answered Apr 28 in JQuery by Niroj
• 23,950 points
36 views
0 votes
1 answer

How to make anchor tag with routing using Laravel?

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

answered Mar 18 in Laravel by Niroj
• 23,950 points
478 views
0 votes
1 answer

What is redirection in Laravel?

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

answered Mar 18 in Laravel by Niroj
• 23,950 points
64 views
0 votes
1 answer

How to install Laravel via composer?

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

answered Mar 23 in Laravel by Niroj
• 23,950 points
68 views
0 votes
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 in Laravel by Niroj
• 23,950 points
174 views
0 votes
1 answer

How to import jQuery UI using ES6/ES7 syntax?

Hii, Add a alias in webpack config: resolve: { ...READ MORE

answered Apr 28 in JQuery by Niroj
• 23,950 points
71 views
0 votes
1 answer

How do I pre-populate a jQuery Datepicker textbox with today's date?

Hello @kartik, You must FIRST call datepicker() > then use ...READ MORE

answered May 29 in JQuery by Niroj
• 23,950 points
20 views