files/ru/web/api/window/domcontentloaded_event/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

---
title: DOMContentLoaded
slug: Web/API/Window/DOMContentLoaded_event
tags:
  - события
translation_of: Web/API/Window/DOMContentLoaded_event
original_slug: Web/Events/DOMContentLoaded
---
<p><code><font face="Open Sans, Arial, sans-serif">Событие </font>DOMContentLoaded</code> происходит когда весь HTML был полностью загружен и пройден парсером, не дожидаясь окончания загрузки таблиц стилей, изображений и фреймов. Значительно отличающееся от него событие <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> используется для отслеживания только полностью загруженной страницы. Широко распространённой ошибкой является использование <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> в ситуации когда <code>DOMContentLoaded</code> является более подходящим, будьте внимательны.</p>

<p>{{Note("Синхронный JavaScript останавливает парсинг DOM.")}}</p>

<p>{{Note("Существуют различные библиотеки, как общего назначения так и специализированные, предлагающие кросс-браузерные методы, позволяющие определить, что DOM готов к использованию.")}}</p>

<h2 id="Ускорение_работы">Ускорение работы</h2>

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

<h2 id="Основная_информация">Основная информация</h2>

<dl>
 <dt style="width: 120px; text-align: right; float: left;">Спецификация</dt>
 <dd style="margin: 0px 0px 0px 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="width: 120px; text-align: right; float: left;">Интерфейс </dt>
 <dd style="margin: 0px 0px 0px 120px;">Event</dd>
 <dt style="width: 120px; text-align: right; float: left;">Всплывает</dt>
 <dd style="margin: 0px 0px 0px 120px;">Да</dd>
 <dt style="width: 120px; text-align: right; float: left;">Отменяемое</dt>
 <dd style="margin: 0px 0px 0px 120px;">Да (несмотря на то, что в спецификации указано как простое событие, которое не является отменяемым)</dd>
 <dt style="width: 120px; text-align: right; float: left;">Цель </dt>
 <dd style="margin: 0px 0px 0px 120px;">Document</dd>
 <dt style="width: 120px; text-align: right; float: left;">Default Action</dt>
 <dd style="margin: 0px 0px 0px 120px;">Нет.</dd>
</dl>

<h2 id="Свойства">Свойства</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Свойство</th>
   <th scope="col">Тип</th>
   <th scope="col">Описание</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>target</code> {{readonlyInline}}</td>
   <td>{{domxref("EventTarget")}}</td>
   <td>The event target (the topmost target in the DOM tree).</td>
  </tr>
  <tr>
   <td><code>type</code> {{readonlyInline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>Тип события.</td>
  </tr>
  <tr>
   <td><code>bubbles</code> {{readonlyInline}}</td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Whether the event normally bubbles or not.</td>
  </tr>
  <tr>
   <td><code>cancelable</code> {{readonlyInline}}</td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Возможно ли отменить событие.</td>
  </tr>
 </tbody>
</table>

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

<pre>&lt;script&gt;
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
&lt;/script&gt;
</pre>

<pre>&lt;script&gt;
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

for(var i=0; i&lt;1000000000; i++)
{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
&lt;/script&gt;
</pre>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

<p>{{Compat}}</p>

<h2 id="Связанные_события">Связанные события</h2>

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