Question

I’m curious what situations exactly require the use of jquery’s $(document).ready() or prototype’s dom:loaded or any other variant of a handler for this event.

In all the browsers i’ve tested, it’s entirely acceptable to begin interacting with html elements and the DOM immediately after the closing tag. (e.g.

<div id="myID">
 My Div
</div>
<script type="text/javascript">
$('#myID').initializeElement();
</script>

So at this point i’m wondering whether $(document).ready() is merely there to reduce the thinking involved in writing javascript code that runs during page load. In the case of using $(document).ready() there is regularly rendering issues such as popping and ‘artifacts’ between the browser first starting to draw the page and the javascript actually executing when the page is ‘ready’.

Are there any scenarios where $(document).ready() is required?

Are there any reasons I shouldn’t be writing initialization scripts as demonstrated?

Answer 1

In the case of external scripts $(document).ready() could be the only option. As for inline script it is a little different.

According to HTML 4.01 standard it seems a little ambiguous whether or not the initialization technique shown above is legal:

http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.4

Scripts that are executed when a document is loaded may be able to
modify the document’s contents
dynamically. The ability to do so
depends on the scripting language
itself (e.g., the “document.write”
statement in the HTML object model
supported by some vendors).

HTML documents are constrained to conform to the HTML DTD both before
and after processing any SCRIPT
elements.

In the HTML 5 draft it seems very clear that this practice is fully supported:

http://www.w3.org/TR/html5/scripting-1.html#scripting-1

The following sample shows how a
script element can be used to define a
function that is then used by other
parts of the document. It also shows
how a script element can be used to
invoke script while the document is
being parsed, in this case to
initialize the form’s output.

<script>
 function calculate(form) {
   var price = 52000;
   if (form.elements.brakes.checked)
     price += 1000;
   if (form.elements.radio.checked)
     price += 2500;
   if (form.elements.turbo.checked)
     price += 5000;
   if (form.elements.sticker.checked)
     price += 250;
   form.elements.result.value = price;
 }
</script>
<form name="pricecalc" onsubmit="return false">
 <fieldset>
  <legend>Work out the price of your car</legend>
  <p>Base cost: £52000.</p>
  <p>Select additional options:</p>
  <ul onchange="calculate(form)">
   <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li>
   <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li>
   <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li>
   <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li>
  </ul>
  <p>Total: £<output name=result></output></p>
 </fieldset>
 <script>
  calculate(document.forms.pricecalc);
 </script>
</form>