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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
title: DOMContentLoaded
slug: Web/Events/DOMContentLoaded
tags:
- события
translation_of: Web/API/Window/DOMContentLoaded_event
---
<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><script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
</script>
</pre>
<pre><script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
for(var i=0; i<1000000000; i++)
{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
</script>
</pre>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{CompatibilityTable}}</p>
<table>
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>1.0<sup>[1]</sup></td>
<td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td>
<td>9.0<sup>[2]</sup></td>
<td>9.0</td>
<td>3.1<sup>[1]</sup></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
<td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td>
<td>{{CompatUnknown}}<sup>[2]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
</tr>
</tbody>
</table>
<p>[1] Всплытие для этого события поддерживается как минимум с версий Gecko 1.9.2, Chrome 6, и Safari 4.</p>
<p>[2] Internet Explorer 8 поддерживает событие <code>readystatechange</code>, которое можно использовать для определения готовности DOM. В более ранних версиях Internet Explorer,это событие можно определить циклическим выполнением <code>document.documentElement.doScroll("left");</code>, это событие будет выбрасывать ошибку если DOM не готов.</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>
|
