Home > Development > Handling events pre-$(document).ready() in jQuery

Handling events pre-$(document).ready() in jQuery

October 30th, 2007 Leave a comment Go to comments

jQuery is the best thing since velcro. No doubt. However, there is one thing that I've stumbled across that other people seem to have wondered about too. jQuery's got this great $(document).ready() capability to let you know when the DOM is ready and jQuery is loaded. However, what about those events (like a user quickly clicking on something) prior to this happening? If any of those require jQuery's functionality, you're SOL.

For right now, what I figured out is just doing this in the HTML:

<a href="javascript:;" id="somediv">Some link</a>

In the Javascript, it would be this:

$(document).ready(function() {
   $("#somediv").click(function() {
      ... your actions here ...

This currently is the only way I could figure it out. This guy had a neat idea basically creating a cache of the events to trigger the minute the DOM is ready. I was thinking of just blindly applying this to all $("a"), but that still requires jQuery to be available, and that's the whole problem to begin with.

This issue makes me nervous because I'm trying to play within the rules that Yahoo! has worked out for optimal performance. However, when you put JavaScript files at the bottom of the page, that means it will be even longer before jQuery is loaded. The more I try to get the pages working with JavaScript files loading at the bottom, the more apparent it becomes that jQuery should still be called at the top/as soon as possible. Unless someone else has figured out a way to make both sides happy...

Categories: Development