Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Everyone's mentioned the <code>ready</code> function (and its shortcuts), but even earlier than that, you can just put code in a <code>script</code> tag just before the closing <code>body</code> tag (this is what the YUI and Google Closure folks recommend), like this:</p> <pre><code>&lt;script type='text/javascript'&gt; pageLoad(); &lt;/script&gt; &lt;/body&gt; </code></pre> <p>At this point, everything above that script tag is available in the DOM.</p> <p>So your options in order of occurrence:</p> <ol> <li><p>Earliest: Function call in <code>script</code> tag just before closing the <code>body</code> tag. The DOM <strong>is</strong> ready at this point (according to the Google Closure folks, and they should know; I've also tested it on a bunch of browsers).</p></li> <li><p>Earlyish: the <code>jQuery.ready</code> callback (and its shortcut forms).</p></li> <li><p>Late, after <strong>all</strong> page elements including images are fully loaded: <code>window</code> <code>onload</code> event.</p></li> </ol> <p>Here's a live example: <a href="http://jsbin.com/icazi4" rel="noreferrer">http://jsbin.com/icazi4</a>, relevant extract:</p> <pre><code>&lt;/body&gt; &lt;script type='text/javascript'&gt; runPage(); jQuery(function() { display("From &lt;tt&gt;jQuery.ready&lt;/tt&gt; callback."); }); $(window).load(function() { display("From &lt;tt&gt;window.onload&lt;/tt&gt; callback."); }); function runPage() { display("From function call at end of &lt;tt&gt;body&lt;/tt&gt; tag."); } function display(msg) { var p = document.createElement('p'); p.innerHTML = msg; document.body.appendChild(p); } &lt;/script&gt; </code></pre> <p>(Yes, I could have used jQuery for the <code>display</code> function, but I was starting with a non-jQuery template.)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload