DOMContentLoaded

  • Revision slug: Mozilla_event_reference/DOMContentLoaded_(event)
  • Revision title: DOMContentLoaded
  • Revision id: 292604
  • Created:
  • Creator: louisremi
  • Is current revision? No
  • Comment

Revision Content

The DOMContentLoaded event is fired the document has finished loading and being parsed, without waiting for stylesheets, images, and subframes to be done loading (the load event can be used to detect a fully-loaded page).

Note: Stylesheet loads block script execution, so if you have a <script> after a <link rel="stylesheet" ...>, the page will not finish parsing - and DOMContentLoaded will not fire - until the stylesheet is loaded.

General info

Specification
HTML5
Interface
Event
Synchronicity
synchronous
Bubbles
Yes
Cancelable
Yes (although specified as a simple event that isn't cancelable)
Target
Document
Default Action
None.

Properties

{{OpenEventProperties()}}{{CloseEventProperties()}}

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 0.2 {{ CompatGeckoDesktop("1") }} 9.0 9.0 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("1") }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.

Cross-browser fallback

Internet Explorer 8 supports the <code>readystatechange</code> event, which can be used to detect that the DOM is ready. In earlier version of Internet Explorer, this state can be detected by regularily trying to execute <code>document.documentElement.doScroll("left");</code>, as this snippet will throw an error until the DOM is ready.

General-purpose JS libraries such as jQuery offer cross-browser methods to detect that the DOM is ready. There are also standalone script that offer this feature : contentloaded.js (supports only one listener) and jquery.documentReady.js (doesn't depend on jQuery, despite its name).

Revision Source

<p>The <code>DOMContentLoaded</code> event is fired the document has finished loading and being parsed, without waiting for stylesheets, images, and subframes to be done loading (the <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> event can be used to detect a fully-loaded page).</p>
<div class="note">
  <p><strong>Note:</strong> <a class="external" href="http://molily.de/weblog/domcontentloaded" title="http://molily.de/weblog/domcontentloaded">Stylesheet loads block script execution</a>, so if you have a <code>&lt;script&gt;</code> after a <code>&lt;link rel="stylesheet" ...&gt;</code>, the page will not finish parsing - and <code>DOMContentLoaded</code> will not fire - until the stylesheet is loaded.</p>
</div>
<h2 id="General_info">General info</h2>
<dl>
  <dt style="float: left; text-align: right; width: 120px;">
    Specification</dt>
  <dd style="margin: 0 0 0 120px;">
    <a class="external" href="http://www.w3.org/TR/html5/the-end.html#the-end">HTML5</a></dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Interface</dt>
  <dd style="margin: 0 0 0 120px;">
    Event</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Synchronicity</dt>
  <dd style="margin: 0 0 0 120px;">
    synchronous</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Bubbles</dt>
  <dd style="margin: 0 0 0 120px;">
    Yes</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Cancelable</dt>
  <dd style="margin: 0 0 0 120px;">
    Yes (although specified as a simple event that isn't cancelable)</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Target</dt>
  <dd style="margin: 0 0 0 120px;">
    Document</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Default Action</dt>
  <dd style="margin: 0 0 0 120px;">
    None.</dd>
</dl>
<h2 id="Properties">Properties</h2>
<p>{{OpenEventProperties()}}{{CloseEventProperties()}}</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>0.2</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>9.0</td>
        <td>9.0</td>
        <td>3.1</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile("1") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p><span style="font-size: 14px; line-height: 18px; ">Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.</span></p>
<h3 id="Cross-browser_fallback">Cross-browser fallback</h3>
<p>Internet Explorer 8 supports the &lt;code&gt;readystatechange&lt;/code&gt; event, which can be used to detect that the DOM is ready. In earlier version of Internet Explorer, this state can be detected by regularily trying to execute &lt;code&gt;document.documentElement.doScroll("left");&lt;/code&gt;, as this snippet will throw an error until the DOM is ready.</p>
<p>General-purpose JS libraries such as jQuery offer cross-browser methods to detect that the DOM is ready. There are also standalone script that offer this feature : <a href="https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js" title="https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js">contentloaded.js</a>&nbsp;(supports only one listener)&nbsp;and <a href="https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js" title="https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js">jquery.documentReady.js</a>&nbsp;(doesn't depend on jQuery, despite its name).</p>
Revert to this revision