---
title: 'Document: DOMContentLoaded event'
slug: Web/API/Document/DOMContentLoaded_event
tags:
  - Событие
translation_of: Web/API/Document/DOMContentLoaded_event
---
<div>{{APIRef}}</div>

<p>Событие <strong><code>DOMContentLoaded</code></strong>  запускается когда первоначальный HTML документ будет полностью загружен и разобран, без ожидания полной загрузки таблиц стилей, изображений и фреймов.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Всплытие</th>
   <td>да</td>
  </tr>
  <tr>
   <th scope="row">Отменяемый</th>
   <td>Да (хотя указано как простое событие, которое не может быть отменено)</td>
  </tr>
  <tr>
   <th scope="row">Интерфейс</th>
   <td>{{domxref("Event")}}</td>
  </tr>
  <tr>
   <th scope="row">Свойство обработчика событий</th>
   <td>нет</td>
  </tr>
 </tbody>
</table>

<p>Разные события,<code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code>, должны быть использованы только для обнаружения полностью загруженной страницы. Это распространённая ошибка в использовании <code>load</code>, там где <code>DOMContentLoaded</code> было бы более уместным.</p>

<p>Синхронный JavaScript останавливает разбор DOM. Если вы хотите что бы DOM был разобран как можно быстрее после того как пользователь запросит страницу, вы должны сделать ваш <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript асинхронным </a>and <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">оптимизировать загрузку таблиц стилей</a>. Если загружать как обычно, таблицы стилей  тормозят разбор DOM так как они загружаются параллельно, "крадя" трафик у основного HTML документа.</p>

<h2 id="Примеры">Примеры</h2>

<h3 id="Основное_применение">Основное применение</h3>

<pre class="brush: js">document.addEventListener('DOMContentLoaded', (event) =&gt; {
    console.log('DOM полностью загружен и разобран');
});
</pre>

<h3 id="Отложенный_DOMContentLoaded">Отложенный DOMContentLoaded</h3>

<pre class="brush: html">&lt;script&gt;
  document.addEventListener('DOMContentLoaded', (event) =&gt; {
    console.log('DOM полностью загружен и разобран');
  });

for( let i = 0; i &lt; 1000000000; i++)
{} // Этот синхронный скрипт откладывает разбор DOM,
   // так что событие DOMContentLoaded будет запущено позже.
&lt;/script&gt;
</pre>

<h3 id="Проверка_того_завершена_ли_загрузка">Проверка того, завершена ли загрузка</h3>

<p><code>DOMContentLoaded</code> может сработать до того, как ваш скрипт будет запущен, поэтому разумно это проверить, перед добавлением обработчика.</p>

<pre class="brush: js">function doSomething() {
  console.info('DOM загружен');
}

if (document.readyState === 'loading') {  // Загрузка ещё не закончилась
  document.addEventListener('DOMContentLoaded', doSomething);
} else {  // `DOMContentLoaded` Уже сработал
  doSomething();
}
</pre>

<h3 id="Живые_примеры">Живые примеры</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div class="controls"&gt;
  &lt;button id="reload" type="button"&gt;Reload&lt;/button&gt;
&lt;/div&gt;

&lt;div class="event-log"&gt;
  &lt;label&gt;Event log:&lt;/label&gt;
  &lt;textarea readonly class="event-log-contents" rows="8" cols="30"&gt;&lt;/textarea&gt;
&lt;/div&gt;</pre>

<div class="hidden">
<h4 id="CSS">CSS</h4>

<pre class="brush: css">body {
  display: grid;
  grid-template-areas: "control  log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label, button {
  display: block;
}

#reload {
  height: 2rem;
}

</pre>
</div>

<h4 id="JS">JS</h4>

<pre class="brush: js">const log = document.querySelector('.event-log-contents');
const reload = document.querySelector('#reload');

reload.addEventListener('click', () =&gt; {
  log.textContent ='';
  window.setTimeout(() =&gt; {
      window.location.reload(true);
  }, 200);
});

window.addEventListener('load', (event) =&gt; {
    log.textContent = log.textContent + 'load\n';
});

document.addEventListener('readystatechange', (event) =&gt; {
    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});

document.addEventListener('DOMContentLoaded', (event) =&gt; {
    log.textContent = log.textContent + `DOMContentLoaded\n`;
});

</pre>

<h4 id="Result">Result</h4>

<p>{{ EmbedLiveSample('Живые_примеры', '100%', '160px') }}</p>

<h2 id="Спецификации">Спецификации</h2>

{{Specifications}}

<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
<p>{{Compat}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>События связанные с: <code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code>, <code><a href="/en-US/docs/Web/API/Document/readystatechange_event">readystatechange</a></code>, <code><a href="/en-US/docs/Web/API/Window/beforeunload_event">beforeunload</a></code>, <code><a href="/en-US/docs/Web/API/Window/unload_event">unload</a></code></li>
 <li>Это событие <code><a href="/en-US/docs/Web/API/Window">Window</a></code> нацеленное на: <code><a href="/en-US/docs/Web/API/Window/DOMContentLoaded_event">DOMContentLoaded</a></code></li>
</ul>