Document: DOMContentLoaded event
================================

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

|  |  |
| --- | --- |
| Всплытие | да |
| Отменяемый | Да (хотя указано как простое событие, которое не может быть отменено) |
| Интерфейс | `Event` |
| Свойство обработчика событий | нет |

Разные события,`load`, должны быть использованы только для обнаружения полностью загруженной страницы. Это распространённая ошибка в использовании `load`, там где `DOMContentLoaded` было бы более уместным.

Синхронный JavaScript останавливает разбор DOM. Если вы хотите что бы DOM был разобран как можно быстрее после того как пользователь запросит страницу, вы должны сделать ваш JavaScript асинхронным and оптимизировать загрузку таблиц стилей. Если загружать как обычно, таблицы стилей тормозят разбор DOM так как они загружаются параллельно, "крадя" трафик у основного HTML документа.

Примеры
-------

### Основное применение


```js
document.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM полностью загружен и разобран");
});
```

### Отложенный DOMContentLoaded


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

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

### Проверка того, завершена ли загрузка

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


```js
function doSomething() {
  console.info("DOM загружен");
}

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

### Живые примеры

#### HTML


```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>
```


```
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;
}
```


#### JS


```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`;
});
```


#### Result

Спецификации
------------

| Specification |
| --- |
| HTML Standard # stop-parsing |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* События связанные с: `load`, `readystatechange`, `beforeunload`, `unload`
* Это событие `Window` нацеленное на: `DOMContentLoaded` (en-US)