Javascript window addeventlistener load

Document: DOMContentLoaded event

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

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

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

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

Примеры

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

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

Отложенный DOMContentLoaded

script> document.addEventListener('DOMContentLoaded', (event) =>  console.log('DOM полностью загружен и разобран'); >); for( let i = 0; i  1000000000; i++) > // Этот синхронный скрипт откладывает разбор DOM, // так что событие DOMContentLoaded будет запущено позже. script> 

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

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

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

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

HTML

div class="controls"> button id="reload" type="button">Reloadbutton> 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

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

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

Браузерная совместимость

BCD tables only load in the browser

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

Found a content problem with this page?

This page was last modified on 17 июл. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Window: load event

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images. This is in contrast to DOMContentLoaded , which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

This event is not cancelable and does not bubble.

Note: All events named load will not propagate to Window , even with bubbles initialized to true . To catch load events on the window , that load event must be dispatched directly to the window .

Note: The load event that is dispatched when the main document has loaded is dispatched on the window , but has two mutated properties: target is document , and path is undefined . These two properties are mutated due to legacy conformance.

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("load", (event) => >); onload = (event) => >; 

Event type

Examples

Log a message when the page is fully loaded:

.addEventListener("load", (event) =>  console.log("page is fully loaded"); >); 

The same, but using the onload event handler property:

.onload = (event) =>  console.log("page is fully loaded"); >; 

Live example

HTML

div class="controls"> button id="reload" type="button">Reloadbutton> div> div class="event-log"> label for="eventLog">Event log:label> textarea readonly class="event-log-contents" rows="8" cols="30" id="eventLog">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; > 

JavaScript

const log = document.querySelector(".event-log-contents"); const reload = document.querySelector("#reload"); reload.addEventListener("click", () =>  log.textContent = ""; setTimeout(() =>  window.location.reload(true); >, 200); >); window.addEventListener("load", (event) =>  log.textContent += "load\n"; >); document.addEventListener("readystatechange", (event) =>  log.textContent += `readystate: $document.readyState>\n`; >); document.addEventListener("DOMContentLoaded", (event) =>  log.textContent += `DOMContentLoaded\n`; >); 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 8, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

load

Событие load происходит, когда загрузилась и HTML страница (за это отвечает событие DOM Content Loaded ), и все ресурсы для её отображения пользователю: стили, картинки и другое.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Можно подписаться на объект window :

 window.addEventListener('load', function ()  console.log('Страница готова!')>) window.addEventListener('load', function ()  console.log('Страница готова!') >)    Скопировать Скопировано Не удалось скопировать   

Или поймать событие на элементах, у которых есть ресурс загрузки:

 const img = document.getElementById('img') img.addEventListener('load', function ()  alert('А вот и картиночка')>) const img = document.getElementById('img') img.addEventListener('load', function ()  alert('А вот и картиночка') >)    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Событие load гарантирует, что браузер отображает страницу полностью: все стили и картинки готовы, размеры элементов на странице посчитаны верно и доступны. Предшествующее load событие DOM Content Loaded таких гарантий не даёт. То же самое с отдельными элементами на странице: если случился load , значит элемент полностью загрузился.

Попробуйте открыть новую страничку кнопкой в демо:

 window.addEventListener('load', function ()  alert('Хоп! Страничка полностью загрузилась, поэтому стили радуют глаз!')>) window.addEventListener('load', function ()  alert('Хоп! Страничка полностью загрузилась, поэтому стили радуют глаз!') >)    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Николай Лопин советует

Скопировать ссылку «Николай Лопин советует» Скопировано

🛠 Чаще применяют DOM Content Loaded .

🛠 Событие load используется, когда код работает со стилями и другими параметрами отображения. Такой код нужен редко, поэтому и событие используется нечасто.

Источник