diff options
Diffstat (limited to 'files/ru/web/api/document/domcontentloaded_event/index.html')
| -rw-r--r-- | files/ru/web/api/document/domcontentloaded_event/index.html | 184 |
1 files changed, 184 insertions, 0 deletions
diff --git a/files/ru/web/api/document/domcontentloaded_event/index.html b/files/ru/web/api/document/domcontentloaded_event/index.html new file mode 100644 index 0000000000..4a77474df9 --- /dev/null +++ b/files/ru/web/api/document/domcontentloaded_event/index.html @@ -0,0 +1,184 @@ +--- +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('Live_example', '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> + +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и вышлите нам pull request .</div> + +<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> |