path: root/files/pt-br/web/api/window/domcontentloaded_event/index.html

---
title: DOMContentLoaded
slug: Web/API/Window/DOMContentLoaded_event
translation_of: Web/API/Window/DOMContentLoaded_event
original_slug: Web/Events/DOMContentLoaded
---
<p>O evento <code>DOMContentLoaded</code> é acionado quando todo o HTML foi completamente carregado e analisado, sem aguardar pelo CSS, imagens, e subframes para encerrar o carregamento. Um evento muito diferente - <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> - deve ser usado apenas para detectar uma página completamente carregada. É um engano comum as pessoas usarem <a href="/en-US/docs/Mozilla_event_reference/load" style="line-height: 19.0909080505371px;"><code>load</code></a><span style="line-height: 19.0909080505371px;"> quando </span><code style="font-style: normal; line-height: 19.0909080505371px;">DOMContentLoaded</code><span style="line-height: 19.0909080505371px;"> seria muito mais apropriado.</span></p>

<div class="note">
<p><strong>Nota:</strong> Javascript Síncrono pausa a análise do DOM.</p>
</div>

<h2 id="Acelerando" style="line-height: 30px; font-size: 2.14285714285714rem;">Acelerando</h2>

<p>Se você quer que o DOM seja analisado o mais rápido possível após uma requisição do usuário, você deve usar recursos do <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">javascript assíncrono</a> e <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">otimizar o carregamento de folhas de estilo</a> pois, caso contrário, a página será carregada mais lentamente pois muitos itens serão carregados paralelamente, atrasando a visualização da página.</p>

<dl style="line-height: 19.0909080505371px;">
</dl>

<h2 id="Informações_gerais">Informações gerais</h2>

<dl>
 <dt style="float: left; text-align: right; width: 120px;">Especificação</dt>
 <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/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;">Propaga</dt>
 <dd style="margin: 0 0 0 120px;">Sim</dd>
 <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt>
 <dd style="margin: 0 0 0 120px;">Sim (embora especificado como evento simples não-cancelável)</dd>
 <dt style="float: left; text-align: right; width: 120px;">Alvo</dt>
 <dd style="margin: 0 0 0 120px;">Document</dd>
 <dt style="float: left; text-align: right; width: 120px;">Ação Default</dt>
 <dd style="margin: 0 0 0 120px;">Nenhuma.</dd>
</dl>

<h2 id="Propriedades">Propriedades</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Property</th>
   <th scope="col">Type</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>target</code> {{readonlyInline}}</td>
   <td>{{domxref("EventTarget")}}</td>
   <td>Alvo do evento (O topo do DOM).</td>
  </tr>
  <tr>
   <td><code>type</code> {{readonlyInline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>Tipo de evento</td>
  </tr>
  <tr>
   <td><code>bubbles</code> {{readonlyInline}}</td>
   <td>{{jsxref("Boolean")}}</td>
   <td>O evento é por padrão bubbles ou não.</td>
  </tr>
  <tr>
   <td><code>cancelable</code> {{readonlyInline}}</td>
   <td>{{jsxref("Boolean")}}</td>
   <td>O evento pode ser cancelado ou não.</td>
  </tr>
 </tbody>
</table>

<h2 id="Exemplo">Exemplo</h2>

<h3 id="Básico">Básico</h3>

<pre class="brush: html" style="font-size: 14px;">&lt;script&gt;
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM completamente carregado e analisado");
  });
&lt;/script&gt;
</pre>

<h3 id="Forçando_o_atraso_do_DOMContentLoaded">Forçando o atraso do DOMContentLoaded</h3>

<pre class="brush: html" style="font-size: 14px;">&lt;script&gt;
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM completamente carregado e analisado");
  });

for(var i=0; i&lt;1000000000; i++)
{} // este script síncrono irá o atrasar carregamento do DOM. Então o evento DOMContentLoaded irá ser ativado mais tarde.
&lt;/script&gt;
</pre>

<p> </p>

<h3 id="Verificando_se_o_carregamento_está_completo">Verificando se o carregamento está completo</h3>

<p><code>DOMContentLoaded</code> pode disparar antes do seu script ser carregado, então é importante validar antes de adicionar um listener.</p>

<pre>function doSomething() {
  console.info("DOM carregado");
}

if (document.readyState === "loading") {  // Ainda carregando
  document.addEventListener("DOMContentLoaded", doSomething);
} else {  // `DOMContentLoaded` foi disparado
  doSomething();
}</pre>

<p> </p>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte básico</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>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</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;">Propagação para este evento é suportada à partir do Gecko 1.9.2, Chrome 6, e Safari 4.</span></p>

<h3 id="Cross-browser_fallback">Cross-browser fallback</h3>

<p>O Internet Explorer 8 suporta o evento <code>readystatechange</code>, que pode ser usado para detectar quando o DOM está pronto. Em versões anteriores do Internet Explorer, este estado pode ser detectado tentando executar <code>document.documentElement.doScroll("left"); </code>repetidas vezes; este comando dará erro repetidamente, até que o DOM esteja pronto.</p>

<p>Há também uma abundância de bibliotecas de propósito geral que oferecem métodos cross-browser para detectar se o DOM está pronto.</p>

<h2 id="Eventos_Relacionados">Eventos Relacionados</h2>

<ul>
 <li>{{event("DOMContentLoaded")}}</li>
 <li>{{event("readystatechange")}}</li>
 <li>{{event("load")}}</li>
 <li>{{event("beforeunload")}}</li>
 <li>{{event("unload")}}</li>
</ul>