Question

53

Requirejs domReady plugin vs Jquery $(document).ready()?

rated 0 times [ 57] [ 4] / answers: 1 / hits: 43627 / 11 Years ago, mon, march 11, 2013, 12:00:00

I am using RequireJS and need to initialize something on DOM ready. Now, RequireJS provides the domReady plugin, but we already have jQuery's $(document).ready(), which is available to me since I have required jQuery.

So I have got two options:

Use the domReady plugin:

require(['domReady'], function (domReady) {

    domReady(function () {

        // Do my stuff here...

    });

});

Use $(document).ready():

$(document).ready(function() {

    // Do my stuff here...

});

Which one should I choose, and why?

Both the options seems to work as expected. I am not confident in the jQuery's one because RequireJS is doing its magic; that is, since RequireJS will dynamically add scripts, I'm worried that DOM ready may occur before all of the dynamically-requested scripts are loaded. Whereas, RequireJS will add a burden on additional JS just for domReady when I already have jQuery required.

Questions

Why does RequireJS provide a domReady plugin when we can have jQuery's $(document).ready();? I don't see any advantage of including another dependency.

If its just to feed a need, then why not provide one for cross-browser AJAX?

As far as I know, a module that requires domReady won't be fetched or executed after the document is ready, and you could do the same requiring jQuery as well:

require(['jQuery'], function ($) {

    $(document).ready(function () {

        // Do my stuff here...

    });

});

To be more clear on my question: what's the difference between requiring domReady or jQuery?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rylee

Add To Favorites

Follow

Total Points: 658

Total Questions: 114

Total Answers: 116

Location: Christmas Island

Member since Mon, Oct 19, 2020

4 Years ago

rylee questions

1 how to fix an error is not a function in unit testing angular 11

Mon, Jan 31, 22, 00:00, 2 Years ago

1 How to wait for function to finish in javascript?

Thu, Apr 29, 21, 00:00, 3 Years ago

1 Whether all error messages should come from the backend in a form that can be shown to the user?

Tue, Apr 27, 21, 00:00, 3 Years ago

1 Error Mocking Firebase Admin in Jest: TypeError: admin.firestore is not a function

Fri, May 8, 20, 00:00, 4 Years ago

1 Javascript data type: BigInt vs Number

Sun, May 3, 20, 00:00, 4 Years ago

View All

answered 11 Years ago marques · Accepted Answer

It seems like all the key points were already hit, but a few details fell through the cracks. Mainly:

domReady

It is both a plugin and a module. If you include it in the the requirements array w/ a trailing ! your module won't execute until it's safe to interact w/ the DOM:

define(['domReady!'], function () {

    console.info('The DOM is ready before I happen');

});

Note that loading and executing are different; you want all your files to load as soon as possible, it's the execution of the contents that is time sensitive.

If you omit the !, then it's just a normal module that happens to be a function, which can take a callback that won't execute before the DOM is safe to interact with:

define(['domReady'], function (domReady) {

    domReady(function () {

        console.info('The DOM is ready before I happen');

    });

    console.info('The DOM might not be ready before I happen');        

});

Advantage when using domReady as a plugin

Code that depends on a module that in turn depends on domReady! has a very significant advantage: It does not need to wait for the DOM to be ready!

Say that we have a block of code, A, that depends on a module, B, that depends on domReady!. Module B will not finish loading before the DOM is ready. In turn, A will not run before B has loaded.

If you were to use domReady as a regular module in B, it would also be necessary for A to depend on domReady, as well as wrapping its code inside a domReady() function call.

Furthermore, this means that domReady! enjoys that same advantage over $(document).ready().

Re the differences between domReady and $(document).ready()

Both sniff out whether/when the DOM is ready in essentially the same way.

Re fear of jQuery firing at the wrong time

jQuery will fire any ready callback even if the DOM loads before jQuery does (your code shouldn't care which happens first.).