javascript/jquery - $(document).ready() and script locations

Question

I'd like to know how $(document).ready() works, along with scripts in general. Say I have scripts that are at the bottom of the page (for performance reasons I'm told?). As an example: say you have a link and you need to prevent it's default action (preventDefault()). If the script is at the bottom of the page, isn't it possible that the user can see the page and click the link before the browser knows not to follow the link?

Answer 1

Yahoo recommends putting all scripts at the end of your document for performance - http://developer.yahoo.com/performance/rules.html

but as you can read in the docs, $(document).ready()

Specify a function to execute when the DOM is fully loaded.

with that said, I don't think you really have to worry about $(document).ready().

I guess $(document).ready() being put in the bottom will just fail if the internet connection is so slow. I can't think any other situation for that to fail.

Answer 2

If the script is at the bottom of the page, isn't it possible that the user can see the page and click the link before the browser knows not to follow the link?

In my experience, yes it is possible. I came across this when styling a table with odd/even colouring from document.ready() (serverside rendering is better, I know). With the script at the top the display was seamless. With the script at the bottom there was sometimes a noticeable delay between loading the HTML page and rendering the rows. This is with a small table too.

The reason that it's recommended you put scripts at the bottom is the way script loading works in HTML. Every time the browser hits a <script> tag, page loading stops until that script is loaded (or retrieved from the cache). If that script is at the bottom, the page is already loaded so the user can see something. If the script is at the top the user will see a blank page until the script loads.

Normally such delays are irrelevant but sometimes they are. Also, as in my example, if your Javascript has visual effects it might be a better user experience to not render the page then change it.

Answer 3

Scripts in the 'head' section are evaluated at the point where the script tag is loaded into the browser (i.e. before the body). Script tags at the end of the document are also executed when they are encountered by the browser as it parses the page - so before the 'document ready' event. The 'document ready' event is fired when the whole page is loaded - i.e. when the browser parses the '</html>' closing tag.

So yes, if it takes a while to load and execute a script that disables links at the end of the document, the user could click a link in the mean time.

One option is to operate in reverse - i.e. load the page with links disabled, and have your javascript enable them. Or, use 'live' or 'delegate' in scripts at the top (after jquery is loaded) so that links are affected as they are created.

Look here for some complexities regarding how browsers handle dynamically loaded scripts slightly differently.

Answer 4

Yes, this is possible, but uncommon in practice. $(document).ready() binds to the dom:loaded event that fires after the dom is built, but before all the resources are fetched. If you're doing something that takes a long time in $(document).ready, it's certainly possible that the user would have a window, albeit narrow to use the unbound elements.

.ready even fires before css is loaded, so if you can see your page before its styled, that's your window to use your unbounded events. For that reason, you need to put any code that needs css properties or image dimension in a $(document).load(...) function.

Answer 5

You want to attach a 'return false' to the onclick event:

<a href="http://www.google.com" onclick="return false;">Google</a>

The usability nazi's will tell you that's bad because people can't follow the links if they don't have javascript.

I say, you're better off not using 'A' tags if you're not actually wanting to link people anywhere :)

<span style="cursor:pointer;text-decoration:underline">Google</span>

Can have the same affect.

Answer 6

I agree that this is possible, but if the site is built from a progressive enhancement perspective, that shouldn't be an issue. If a user has JavaScript disabled (why would they do that??!?!?) or an older browser that doesn't support something that your script is doing, then that link is the only way they have to get to the content.

So if the user clicks the link in that half-second or so before scripts are loaded, then they still can do work. If they wait until the page fully loads, then the scripts kick in and the link click displays a modal dialog instead of navigating away. Either way, the user gets to the content.