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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
---
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>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
<p>{{Compat("api.Document.DOMContentLoaded_event")}}</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>
|
