В этом руководстве вы узнаете, как обрабатывать событие загрузки, которое срабатывает для элементов документа, изображения и скрипта в JavaScript.
Событие загрузки окна
Для window объекта, событие loadзапускается, когда вся веб-страница (HTML) полностью загружена, включая все зависимые ресурсы, включая файлы JavaScript, файлы CSS и изображения.
Для обработки события load вы регистрируете прослушиватель событий, используя метод addEventListener() :
window.addEventListener('load',(event) => {
console.log('The page has fully loaded');
});Или используйте свойство onload объекта window :
window.onload = (event) => {
console.log('The page has fully loaded');
};Если вы поддерживаете устаревшую систему, вы можете обнаружить, что обработчик событий load зарегистрирован в элементе body HTML-документа, например:
<!DOCTYPE html>
<html>
<head>
<title>JS load Event Demo</title>
</head>
<body onload="console.log('Loaded!')">
</body>
</html>По возможности рекомендуется использовать метод addEventListener() для назначения обработчика событий onload.
Событие для изображения
load также срабатывает для изображений. Чтобы обработать событие load для изображений, используйте метод addEventListener() элементов изображения.
В следующем примере используется обработчик событий load, чтобы определить, полностью ли загружено изображение, существующее в дереве DOM:
<!DOCTYPE html>
<html>
<head>
<title>Image load Event Demo</title>
</head>
<body>
<img id="logo">
<script>
let logo = document.querySelector('#logo');
logo.addEventListener('load',(event) => {
console.log('Logo has been loaded!');
});
logo.src = "logo.png";
</script>
</body>
</html>
Вы можете назначить обработчик события onload напрямую, используя атрибут onload элемента <img>, например:
<img id="logo"
src="logo.png"
onload="console.log('Logo loaded!')">
Если вы создаете элемент изображения динамически, вы можете назначить обработчик события onload перед установкой свойства src следующим образом:
window.addEventListener('load'() => {
let logo = document.createElement('img');
// assign and onload event handler
logo.addEventListener('load',(event) => {
console.log('The logo has been loaded');
});
// add logo to the document
document.body.appendChild(logo);
logo.src = 'logo.png';
});
Как это работает:
- Во-первых, создайте элемент изображения после полной загрузки документа, поместив код в обработчик события загрузки окна.
- Во-вторых, назначьте обработчик события
onloadдля изображения. - В-третьих, добавьте изображение в документ.
- Наконец, назначьте URL-адрес изображения атрибуту
src. Изображение будет загружено в элемент, как только будет установлено свойствоsrc.
Событие загрузки скрипта
Элемент <script> также поддерживает событие load, немного отличающееся от стандартных способов. Событие скрипта load позволяет проверить, полностью ли загружен файл JavaScript.
В отличие от изображений, веб-браузер начинает загрузку файлов JavaScript только после того, как будет присвоено свойство src и в документ будет добавлен элемент <script>.
Следующий код загружает файл app.js после полной загрузки страницы. Он назначает обработчик событий onload для проверки того, полностью ли загружен app.js.
window.addEventListener('load', checkJSLoaded)
function checkJSLoaded() {
// create the script element
let script = document.createElement('script');
// assign an onload event handler
script.addEventListener('load',(event) => {
console.log('app.js file has been loaded');
});
// load the script file
script.src = 'app.js';
document.body.appendChild(script);
}Заключение
loadвозникает, когда документ полностью загружен, включая зависимые ресурсы, такие как файлы JavaScript, файлы CSS и изображения.<img>и<script>также поддерживают событиеload.- Используйте метод
addEventListener()для регистрации обработчика событийonload.