mozilla

Revision 330047 of DOMContentLoaded

  • Revision slug: DOM/DOM_event_reference/DOMContentLoaded
  • Revision title: DOMContentLoaded
  • Revision id: 330047
  • Created:
  • Creator: louisremi
  • Is current revision? Yes
  • Comment

Revision Content

REDIRECT DOMContentLoaded Event

The DOMContentLoaded event is fired at the page's document object when parsing of the document is finished. By the time this event fires, the page's DOM is ready, but the referenced stylesheets, images, and subframes may not be done loading; use the "load" event to detect a fully-loaded page.

  • Interface :{{ domxref('Event') }}
  • Synchronicity :yes
  • Bubbles : yes
  • Target : {{ domxref('Document') }}
  • Cancelable : no (but see the "Browser compatibility" section below)
  • Default action : none

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.

The event bubbles to {{ domxref("window") }}. It is not fired on the parent page for document loads in subframes.

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() }}

Gecko notes

In Gecko (as of 1.9.2) this event reports itself as cancelable, but since it doesn't have a default action, canceling it has no effect.

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

DOMContentLoaded has been supported by Mozilla since before version 1.0, and was since implemented by other browsers (including IE 9) and has now been standardized in the HTML5 specification.

Specification

W3C HTML5: Parsing HTML Documents

{{ languages( {"zh-cn": "zh-cn/DOM/DOM_event_reference/DOMContentLoaded" } ) }}

Revision Source

<p>REDIRECT <a class="redirect" href="/en-US/docs/Mozilla_event_reference/DOMContentLoaded_(event)">DOMContentLoaded Event</a></p>
<p>The <code>DOMContentLoaded</code> event is fired at the page's <a href="/en/DOM/document" title="en/DOM/document">document</a> object when parsing of the document is finished. By the time this event fires, the page's DOM is ready, but the referenced stylesheets, images, and subframes <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=481534#c1" title="https://bugzilla.mozilla.org/show_bug.cgi?id=481534#c1">may not be done loading</a>; use the "load"&nbsp;event to detect a fully-loaded page.</p>
<ul style="display:table;padding: 0;border-left: 2px solid;margin-left:0.5em;">
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Interface :</dfn>{{ domxref('Event') }}</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Synchronicity :</dfn>yes</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Bubbles :</dfn> yes</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Target :</dfn> {{ domxref('Document') }}</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Cancelable :</dfn> no (but see the "Browser compatibility" section below)</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Default action :</dfn> none</li>
</ul>
<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>
<p style="display:table-row;padding: 3px;margin:0;">The event <a href="/en/DOM/event.bubbles" title="En/DOM/Event.bubbles">bubbles</a> to {{ domxref("window") }}. It is not fired on the parent page for document loads in subframes.</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>
<h3 id="Gecko_notes">Gecko notes</h3>
<p>In Gecko (as of 1.9.2) this event reports itself as <a href="/en/DOM/event.cancelable" title="En/DOM/Event.cancelable">cancelable</a>, but since it doesn't have a default action, canceling it has no effect.</p>
<p>Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.</p>
<p><code>DOMContentLoaded</code> has been supported by Mozilla <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=109760" title="https://bugzilla.mozilla.org/show_bug.cgi?id=109760">since before version 1.0</a>, and was since implemented by other browsers (<a class="external" href="http://ie.microsoft.com/testdrive/HTML5/87DOMContent-Loaded/Default.html" title="http://ie.microsoft.com/testdrive/HTML5/87DOMContent-Loaded/Default.html">including IE 9</a>) and has now been standardized in the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html">HTML5 specification</a>.</p>
<h2 id="Specification">Specification</h2>
<p><a class="external" href="http://www.w3.org/TR/html5/the-end.html#the-end" title="http://www.w3.org/TR/html5/the-end.html#the-end">W3C HTML5: Parsing HTML Documents</a></p>
<p>{{ languages( {"zh-cn": "zh-cn/DOM/DOM_event_reference/DOMContentLoaded" } ) }}</p>
Revert to this revision