DOMContentLoaded

  • Revision slug: DOM/DOM_event_reference/DOMContentLoaded
  • Revision title: DOMContentLoaded
  • Revision id: 13764
  • Created:
  • Creator: Marcoos
  • Is current revision? No
  • Comment 1 words added, 1 words removed

Revision Content

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 :?
  • 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 is bubbles to 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 {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("1") }} 9.0 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("1") }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

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

Revision Source

<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" 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>?</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>Note: <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 is <a href="/en/DOM/event.bubbles" title="En/DOM/Event.bubbles">bubbles</a> to <code>window</code>. It is not fired on the parent page for document loads in subframes.</p>
<h2>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>{{ CompatVersionUnknown() }}</td> <td>{{ CompatGeckoDesktop("1") }}</td> <td>9.0</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</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>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>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>
Revert to this revision