Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Don’t let jQuery’s $(document).ready() slow you down

encosia.com

Post reply on HN
Print view View original

11–20 of 25 posts

Re: Don’t let jQuery’s $(document).ready() slow you down

#12

Post by Encosia »

IgorPartola wrote: post #10
billybob wrote: post #9

Earlier quoted context omitted.

For devs not familiar with jQuery (and on the off-chance that you'll need no-conflicts mode at some point), you might even avoid the dollar sign. jQuery(document).ready(function(){});

Or even better: jQuery(document).ready(function($){});

You can also use the module pattern[1] to isolate code from tampering or conflicts:

  (function($, window, undefined) {
    $(document).ready({
      // etc.
    });
  }(jQuery, window);
[1] http://www.yuiblog.com/blog/2007/06/12/module-pattern/

Re: Don’t let jQuery’s $(document).ready() slow you down

#13

Post by JustinSeriously »

billybob wrote: post #9
Encosia wrote: post #8

Earlier quoted context omitted.

I'm torn when it comes to that. The readability of $(document).ready() is better. Especially for later devs who may not be familiar with jQuery.

For devs not familiar with jQuery (and on the off-chance that you'll need no-conflicts mode at some point), you might even avoid the dollar sign. jQuery(document).ready(function(){});

On the other hand, if a dev is that unfamiliar with jQuery code, they shouldn't maintaining jQuery code.

Using $(function(){}); serves as a nice warning to this effect.

Re: Don’t let jQuery’s $(document).ready() slow you down

#15

Post by chc »

nphase wrote: post #7

I know this is off topic, but there's another reason it slows you down - too many keystrokes. I prefer $(function(){}); to $(document).ready(function(){});

Even further off-topic, I really like the succinctness of the former in CoffeeScript:

  $(function () {
      $('#index').append($('article p:first-child'));
  });
becomes:

  $ -> $('#index').append $('article p:first-child')
Not exactly noob-friendly, but very concise.

Re: Don’t let jQuery’s $(document).ready() slow you down

#16

Post by Smuggler »

nphase wrote: post #7

I know this is off topic, but there's another reason it slows you down - too many keystrokes. I prefer $(function(){}); to $(document).ready(function(){});

This is my preferred pattern:

jQuery(function($){

});

It would avoid noConflict type problems.

Re: Don’t let jQuery’s $(document).ready() slow you down

#17

Post by vasi »

Seems to me that AJAX before document-ready could get complicated once you want to actually do something with the response. Normally one would do something like this:

  $(document).ready(function(){
    $.getJSON(my_url, function(data) {
      $('
').text(data.some_text).appendTo('#some_container);
    });
  });
But if we call getJSON before document-ready, the node $('#some_container') may not yet exist! Now we need some way to wait until both the AJAX request is complete and the document is ready…recommendations?

EDIT: Thanks for the responses, glad to know it's safer than I thought!

Re: Don’t let jQuery’s $(document).ready() slow you down

#18

Post by MBlume »

vasi wrote: post #17

Seems to me that AJAX before document-ready could get complicated once you want to actually do something with the response. Normally one would do something like this: $(document).ready(function(){ $.getJSON(my_url, function(data) { $(' ').text(data.some_text).appendTo('#some_container); }); }); But if we call getJSON before document-ready, the node $('#some_container') may not yet exist! Now we need some way to wait…

swap the first two lines:

  $.getJSON(my_url, function(data) {
    $(document).ready(function(){
      $('
').text(data.some_text).appendTo('#some_container);
    });
  });

Re: Don’t let jQuery’s $(document).ready() slow you down

#19

Post by [deleted] »

vasi wrote: post #17

Seems to me that AJAX before document-ready could get complicated once you want to actually do something with the response. Normally one would do something like this: $(document).ready(function(){ $.getJSON(my_url, function(data) { $(' ').text(data.some_text).appendTo('#some_container); }); }); But if we call getJSON before document-ready, the node $('#some_container') may not yet exist! Now we need some way to wait…

[deleted]

Re: Don’t let jQuery’s $(document).ready() slow you down

#20

Post by photon_off »

MBlume wrote: post #18
vasi wrote: post #17

Seems to me that AJAX before document-ready could get complicated once you want to actually do something with the response. Normally one would do something like this: $(document).ready(function(){ $.getJSON(my_url, function(data) { $(' ').text(data.some_text).appendTo('#some_container); }); }); But if we call getJSON before document-ready, the node $('#some_container') may not yet exist! Now we need some way to wait…

swap the first two lines: $.getJSON(my_url, function(data) { $(document).ready(function(){ $(' ').text(data.some_text).appendTo('#some_container); }); });

Very clever. This works because $(document).ready will execute immediately if the page is already loaded.
Post reply on HN