--- 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) => { console.log('DOM полностью загружен и разобран'); }); </pre> <h3 id="Отложенный_DOMContentLoaded">Отложенный DOMContentLoaded</h3> <pre class="brush: html"><script> document.addEventListener('DOMContentLoaded', (event) => { console.log('DOM полностью загружен и разобран'); }); for( let i = 0; i < 1000000000; i++) {} // Этот синхронный скрипт откладывает разбор DOM, // так что событие DOMContentLoaded будет запущено позже. </script> </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"><div class="controls"> <button id="reload" type="button">Reload</button> </div> <div class="event-log"> <label>Event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div></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', () => { log.textContent =''; window.setTimeout(() => { window.location.reload(true); }, 200); }); window.addEventListener('load', (event) => { log.textContent = log.textContent + 'load\n'; }); document.addEventListener('readystatechange', (event) => { log.textContent = log.textContent + `readystate: ${document.readyState}\n`; }); document.addEventListener('DOMContentLoaded', (event) => { 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>