Событие onload
Событие onload используется как указатель, что веб-страница полностью загружена, включая содержание, изображения, стилевые файлы и внешние скрипты.
Синтаксис
onload="скрипт"Значения
Значение по умолчанию
Применяется к тегам
Пример
HTML5 IE Cr Op Sa Fx
Событие onload @keyframes _transparent < from < opacity: 0; >to < opacity: 1;>> @-webkit-keyframes _transparent < from < opacity: 0; >to < opacity: 1;>> @-moz-keyframes _transparent < from < opacity: 0; >to < opacity: 1;>> #status function loadPage()
В данном примере после загрузки страницы будет выведено сообщение «Страница загружена».
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Что делает метод document onload js?
Событие load срабатывает на объекте window (а не на document , как в вопросе) в тот момент, когда браузер загрузил HTML, построил DOM-дерево, а также загрузил все внешние ресурсы (картинки, стили и т.д.).
window.addEventListener('load', () => console.log('All resources has been loaded!'); // => All resources has been loaded! (после загрузки HTML и всех связанных ресурсов) >); В этом заключается отличие данного события от события DOMContentLoaded на объекте document , которое срабатывает, когда браузер полностью загрузил HTML, построил DOM-дерево, но внешние ресурсы еще не загрузились.
Страница: DOMContentLoaded, load, beforeunload, unload
У жизненного цикла HTML-страницы есть три важных события:
- DOMContentLoaded – браузер полностью загрузил HTML, было построено DOM-дерево, но внешние ресурсы, такие как картинки
и стили, могут быть ещё не загружены.
- load – браузер загрузил HTML и внешние ресурсы (картинки, стили и т.д.).
- beforeunload/unload – пользователь покидает страницу.
Каждое из этих событий может быть полезно:
- Событие DOMContentLoaded – DOM готов, так что обработчик может искать DOM-узлы и инициализировать интерфейс.
- Событие load – внешние ресурсы были загружены, стили применены, размеры картинок известны и т.д.
- Событие beforeunload – пользователь покидает страницу. Мы можем проверить, сохранил ли он изменения и спросить, на самом ли деле он хочет уйти.
- unload – пользователь почти ушёл, но мы всё ещё можем запустить некоторые операции, например, отправить статистику.
Давайте рассмотрим эти события подробнее.
DOMContentLoaded
Событие DOMContentLoaded срабатывает на объекте document .
Мы должны использовать addEventListener , чтобы поймать его:
document.addEventListener("DOMContentLoaded", ready); // не "document.onDOMContentLoaded = . " 
В этом примере обработчик DOMContentLoaded запустится, когда документ загрузится, так что он увидит все элементы, включая расположенный ниже .
Но он не дожидается, пока загрузится изображение. Поэтому alert покажет нулевой размер.
На первый взгляд событие DOMContentLoaded очень простое. DOM-дерево готово – получаем событие. Хотя тут есть несколько особенностей.
DOMContentLoaded и скрипты
Когда браузер обрабатывает HTML-документ и встречает тег , он должен выполнить его перед тем, как продолжить строить DOM. Это делается на случай, если скрипт захочет изменить DOM или даже дописать в него ( document.write ), так что DOMContentLoaded должен подождать.
Поэтому DOMContentLoaded определённо случится после таких скриптов:
В примере выше мы сначала увидим «Библиотека загружена…», а затем «DOM готов!» (все скрипты выполнены).
Скрипты, которые не блокируют DOMContentLoaded
Есть два исключения из этого правила:
- Скрипты с атрибутом async , который мы рассмотрим немного позже, не блокируют DOMContentLoaded.
- Скрипты, сгенерированные динамически при помощи document.createElement(‘script’) и затем добавленные на страницу, также не блокируют это событие.
DOMContentLoaded и стили
Внешние таблицы стилей не затрагивают DOM, поэтому DOMContentLoaded их не ждёт.
Но здесь есть подводный камень. Если после стилей у нас есть скрипт, то этот скрипт должен дождаться, пока загрузятся стили:
Причина в том, что скрипту может понадобиться получить координаты или другие свойства элементов, зависящих от стилей, как в примере выше. Естественно, он должен дождаться, пока стили загрузятся.
Так как DOMContentLoaded дожидается скриптов, то теперь он так же дожидается и стилей перед ними.
Встроенное в браузер автозаполнение
Firefox, Chrome и Opera автоматически заполняют поля при наступлении DOMContentLoaded .
Например, если на странице есть форма логина и пароля и браузер запомнил значения, то при наступлении DOMContentLoaded он попытается заполнить их (если получил разрешение от пользователя).
Так что, если DOMContentLoaded откладывается из-за долгой загрузки скриптов, в свою очередь – откладывается автозаполнение. Вы наверняка замечали, что на некоторых сайтах (если вы используете автозаполнение в браузере) поля логина и пароля не заполняются мгновенно, есть некоторая задержка до полной загрузки страницы. Это и есть ожидание события DOMContentLoaded .
window.onload
Событие load на объекте window наступает, когда загрузилась вся страница, включая стили, картинки и другие ресурсы. Это событие доступно через свойство onload .
В примере ниже правильно показаны размеры картинки, потому что window.onload дожидается всех изображений:
window.onunload
Когда посетитель покидает страницу, на объекте window генерируется событие unload . В этот момент стоит совершать простые действия, не требующие много времени, вроде закрытия связанных всплывающих окон.
Обычно здесь отсылают статистику.
Предположим, мы собрали данные о том, как используется страница: клики, прокрутка, просмотры областей страницы и так далее.
Естественно, событие unload – это тот момент, когда пользователь нас покидает и мы хотим сохранить эти данные.
Для этого существует специальный метод navigator.sendBeacon(url, data) , описанный в спецификации https://w3c.github.io/beacon/.
Он посылает данные в фоне. Переход к другой странице не задерживается: браузер покидает страницу, но всё равно выполняет sendBeacon .
Его можно использовать вот так:
let analyticsData = < /* объект с собранными данными */ >; window.addEventListener("unload", function() < navigator.sendBeacon("/analytics", JSON.stringify(analyticsData)); >);- Отсылается POST-запрос.
- Мы можем послать не только строку, но так же формы и другие форматы, как описано в главе Fetch, но обычно это строковый объект.
- Размер данных ограничен 64 Кб.
К тому моменту, как sendBeacon завершится, браузер наверняка уже покинет страницу, так что возможности обработать ответ сервера не будет (для статистики он обычно пустой).
Для таких запросов с закрывающейся страницей есть специальный флаг keepalive в методе fetch для общих сетевых запросов. Вы можете найти больше информации в главе Fetch API.
Если мы хотим отменить переход на другую страницу, то здесь мы этого сделать не сможем. Но сможем в другом месте – в событии onbeforeunload .
window.onbeforeunload
Если посетитель собирается уйти со страницы или закрыть окно, обработчик beforeunload попросит дополнительное подтверждение.
Если мы отменим это событие, то браузер спросит посетителя, уверен ли он.
Вы можете попробовать это, запустив следующий код и затем перезагрузив страницу:
window.onbeforeunload = function() < return false; >;По историческим причинам возврат непустой строки так же считается отменой события. Когда-то браузеры использовали её в качестве сообщения, но, как указывает современная спецификация, они не должны этого делать.
window.onbeforeunload = function() < return "Есть несохранённые изменения. Всё равно уходим?"; >;Поведение было изменено, потому что некоторые веб-разработчики злоупотребляли этим обработчиком события, показывая вводящие в заблуждение и надоедливые сообщения. Так что, прямо сейчас старые браузеры всё ещё могут показывать строку как сообщение, но в остальных – нет возможности настроить показ сообщения пользователям.
readyState
Что произойдёт, если мы установим обработчик DOMContentLoaded после того, как документ загрузился?
Естественно, он никогда не запустится.
Есть случаи, когда мы не уверены, готов документ или нет. Мы бы хотели, чтобы наша функция исполнилась, когда DOM загрузился, будь то сейчас или позже.
Свойство document.readyState показывает нам текущее состояние загрузки.
Есть три возможных значения:
- «loading» – документ загружается.
- «interactive» – документ был полностью прочитан.
- «complete» – документ был полностью прочитан и все ресурсы (такие как изображения) были тоже загружены.
Так что мы можем проверить document.readyState и, либо установить обработчик, либо, если документ готов, выполнить код сразу же.
Например, вот так:
function work() < /*. */ >if (document.readyState == 'loading') < // ещё загружается, ждём события document.addEventListener('DOMContentLoaded', work); >else < // DOM готов! work(); >Также есть событие readystatechange , которое генерируется при изменении состояния, так что мы можем вывести все эти состояния таким образом:
// текущее состояние console.log(document.readyState); // вывести изменения состояния document.addEventListener('readystatechange', () => console.log(document.readyState));Событие readystatechange – альтернативный вариант отслеживания состояния загрузки документа, который появился очень давно. На сегодняшний день он используется редко.
Для полноты картины давайте посмотрим на весь поток событий:
Здесь документ с , и обработчиками, которые логируют события:
log('img onload'); Рабочий пример есть в песочнице.
- [1] начальный readyState:loading
- [2] readyState:interactive
- [2] DOMContentLoaded
- [3] iframe onload
- [4] img onload
- [4] readyState:complete
- [4] window onload
Цифры в квадратных скобках обозначают примерное время события. События, отмеченные одинаковой цифрой, произойдут примерно в одно и то же время (± несколько миллисекунд).
- document.readyState станет interactive прямо перед DOMContentLoaded . Эти две вещи, на самом деле, обозначают одно и то же.
- document.readyState станет complete , когда все ресурсы ( iframe и img ) загрузятся. Здесь мы видим, что это произойдёт примерно в одно время с img.onload ( img последний ресурс) и window.onload . Переключение на состояние complete означает то же самое, что и window.onload . Разница заключается в том, что window.onload всегда срабатывает после всех load других обработчиков.
Итого
События загрузки страницы:
- DOMContentLoaded генерируется на document , когда DOM готов. Мы можем применить JavaScript к элементам на данном этапе.
- Скрипты, вроде или блокируют DOMContentLoaded, браузер ждёт, пока они выполнятся.
- Изображения и другие ресурсы тоже всё ещё могут продолжать загружаться.
- loading – документ грузится.
- interactive – документ прочитан, происходит примерно в то же время, что и DOMContentLoaded , но до него.
- complete – документ и ресурсы загружены, происходит примерно в то же время, что и window.onload , но до него.
Загрузка ресурсов: onload и onerror
Браузер позволяет отслеживать загрузку сторонних ресурсов: скриптов, ифреймов, изображений и др.
Для этого существуют два события:
- load – успешная загрузка,
- error – во время загрузки произошла ошибка.
Загрузка скриптов
Допустим, нам нужно загрузить сторонний скрипт и вызвать функцию, которая объявлена в этом скрипте.
Мы можем загрузить этот скрипт динамически:
let script = document.createElement('script'); script.src = "my.js"; document.head.append(script);…Но как нам вызвать функцию, которая объявлена внутри того скрипта? Нам нужно подождать, пока скрипт загрузится, и только потом мы можем её вызвать.
На заметку:
Для наших собственных скриптов мы можем использовать JavaScript-модули, но они не слишком широко распространены в сторонних библиотеках.
script.onload
Главный помощник – это событие load . Оно срабатывает после того, как скрипт был загружен и выполнен.
let script = document.createElement('script'); // мы можем загрузить любой скрипт с любого домена script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js" document.head.append(script); script.onload = function() < // в скрипте создаётся вспомогательная переменная с именем "_" alert(_.VERSION); // отображает версию библиотеки >;Таким образом, в обработчике onload мы можем использовать переменные, вызывать функции и т.д., которые предоставляет нам сторонний скрипт.
…А что если во время загрузки произошла ошибка? Например, такого скрипта нет (ошибка 404), или сервер был недоступен.
script.onerror
Ошибки, которые возникают во время загрузки скрипта, могут быть отслежены с помощью события error .
Например, давайте запросим скрипт, которого не существует:
let script = document.createElement('script'); script.src = "https://example.com/404.js"; // такого файла не существует document.head.append(script); script.onerror = function() < alert("Ошибка загрузки " + this.src); // Ошибка загрузки https://example.com/404.js >;Обратите внимание, что мы не можем получить описание HTTP-ошибки. Мы не знаем, была ли это ошибка 404 или 500, или какая-то другая. Знаем только, что во время загрузки произошла ошибка.
Обработчики onload / onerror отслеживают только сам процесс загрузки.
Ошибки обработки и выполнения загруженного скрипта ими не отслеживаются. Чтобы «поймать» ошибки в скрипте, нужно воспользоваться глобальным обработчиком window.onerror .
Другие ресурсы
События load и error также срабатывают и для других ресурсов, а вообще, для любых ресурсов, у которых есть внешний src .
let img = document.createElement('img'); img.src = "https://js.cx/clipart/train.gif"; // (*) img.onload = function() < alert(`Изображение загружено, размеры $x$`); >; img.onerror = function() < alert("Ошибка во время загрузки изображения"); >;Однако есть некоторые особенности:
- Большинство ресурсов начинают загружаться после их добавления в документ. За исключением тега
. Изображения начинают загружаться, когда получают src (*) .
- Для событие load срабатывает по окончании загрузки как в случае успеха, так и в случае ошибки.
Такое поведение сложилось по историческим причинам.
Ошибка в скрипте с другого источника
Есть правило: скрипты с одного сайта не могут получить доступ к содержимому другого сайта. Например, скрипт с https://facebook.com не может прочитать почту пользователя на https://gmail.com .
Или, если быть более точным, один источник (домен/порт/протокол) не может получить доступ к содержимому с другого источника. Даже поддомен или просто другой порт будут считаться разными источниками, не имеющими доступа друг к другу.
Это правило также касается ресурсов с других доменов.
Если мы используем скрипт с другого домена, и в нем имеется ошибка, мы не сможем узнать детали этой ошибки.
Для примера давайте возьмём мини-скрипт error.js , который состоит из одного-единственного вызова функции, которой не существует:
// �� error.js noSuchFunction();Теперь загрузим этот скрипт с того же сайта, на котором он лежит:
Мы видим нормальный отчёт об ошибке:
Uncaught ReferenceError: noSuchFunction is not defined https://javascript.info/article/onload-onerror/crossorigin/error.js, 1:1А теперь загрузим этот же скрипт с другого домена:
Script error. , 0:0Детали отчёта могут варьироваться в зависимости от браузера, но основная идея остаётся неизменной: любая информация о внутреннем устройстве скрипта, включая стек ошибки, спрятана. Именно потому, что скрипт загружен с другого домена.
Зачем нам могут быть нужны детали ошибки?
Существует много сервисов (и мы можем сделать наш собственный), которые обрабатывают глобальные ошибки при помощи window.onerror , сохраняют отчёт о них и предоставляют доступ к этому отчёту для анализа. Это здорово, потому что мы можем увидеть реальные ошибки, которые случились у наших пользователей. Но если скрипт – с другого домена, то информации об ошибках в нём почти нет, как мы только что видели.
Похожая кросс-доменная политика (CORS) внедрена и в отношении других ресурсов.
Чтобы разрешить кросс-доменный доступ, нам нужно поставить тегу атрибут crossorigin , и, кроме того, удалённый сервер должен поставить специальные заголовки.
Существует три уровня кросс-доменного доступа:
- Атрибут crossorigin отсутствует – доступ запрещён.
- crossorigin=»anonymous» – доступ разрешён, если сервер отвечает с заголовком Access-Control-Allow-Origin со значениями * или наш домен. Браузер не отправляет авторизационную информацию и куки на удалённый сервер.
- crossorigin=»use-credentials» – доступ разрешён, если сервер отвечает с заголовками Access-Control-Allow-Origin со значением наш домен и Access-Control-Allow-Credentials: true . Браузер отправляет авторизационную информацию и куки на удалённый сервер.
На заметку:
Почитать больше о кросс-доменных доступах вы можете в главе Fetch: запросы на другие сайты. Там описан метод fetch для сетевых запросов, но политика там точно такая же.
Такое понятие как «куки» (cookies) не рассматривается в текущей главе, но вы можете почитать о них в главе Куки, document.cookie.
В нашем случае атрибут crossorigin отсутствовал. Поэтому кросс-доменный доступ был запрещён. Давайте добавим его.
Мы можем выбрать «anonymous» (куки не отправляются, требуется один серверный заголовок) или «use-credentials» (куки отправляются, требуются два серверных заголовка) в качестве значения атрибута.
Если куки нас не волнуют, тогда смело выбираем «anonymous» :
Теперь при условии, что сервер предоставил заголовок Access-Control-Allow-Origin , всё хорошо. У нас есть полный отчёт по ошибкам.
Итого
Изображения
, внешние стили, скрипты и другие ресурсы предоставляют события load и error для отслеживания загрузки:
- load срабатывает при успешной загрузке,
- error срабатывает при ошибке загрузки.
Единственное исключение – это : по историческим причинам срабатывает всегда load вне зависимости от того, как завершилась загрузка, даже если страница не была найдена.
Событие readystatechange также работает для ресурсов, но используется редко, потому что события load/error проще в использовании.
Задачи
Загрузите изображения с колбэком
важность: 4
Обычно изображения начинают загружаться в момент их создания. Когда мы добавляем
на страницу, пользователь не увидит его тут же. Браузер сначала должен его загрузить.
Чтобы показать изображение сразу, мы можем создать его «заранее»:
let img = document.createElement('img'); img.src = 'my.jpg';Браузер начнёт загружать изображение и положит его в кеш. Позже, когда такое же изображение появится в документе (не важно как), оно будет показано мгновенно.
Создайте функцию preloadImages(sources, callback) , которая загружает все изображения из массива sources и, когда все они будут загружены, вызывает callback .
В данном примере будет показан alert после загрузки всех изображений.
function loaded() < alert("Изображения загружены") >preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);В случае ошибки функция должна считать изображение «загруженным».
Другими словами, callback выполняется в том случае, когда все изображения либо загружены, либо в процессе их загрузки возникла ошибка.
Такая функция полезна, например, когда нам нужно показать галерею с маленькими скролящимися изображениями, и мы хотим быть уверены, что все из них загружены.
В песочнице подготовлены ссылки к тестовым изображениям, а также код для проверки их загрузки. Код должен выводить 300 .
- Создадим img для каждого ресурса.
- Добавим обработчики onload/onerror для каждого изображения.
- Увеличиваем счётчик при срабатывании onload или onerror .
- Когда значение счётчика равно количеству ресурсов – тогда вызываем callback() .