Событие 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-дерево, но внешние ресурсы еще не загрузились.
Свойство onload — Функция обратного вызова — Обработчик событий
Здесь Вы познакомитесь с понятием функция обратного вызова или обработчик событий.
При помощи свойства onload объекта window и функции init браузеру будет дана команда о выполнении JavaScript -кода только после полной загрузки страницы.
При этом JavaScript -код будет расположен в начале страницы.
JavaScript-код в начале или в конце страницы.
Здесь мы говорили о том, что строку вызова скрипта JavaScript следует располагать в конце веб-документа , чтобы JavaScript -код включался в работу после полной загрузки страницы и построения DOM-дерева.
Фрагмент кода
var planet = document . getElementById ( «sun» );
planet . innerHTML = «Sun is yellow planet» ;
Our Planet
«earth» > Green Planet
Red Planet
«mars» > Mars is red planet
Yellow Planet
Our Planet
Red Planet
Mars is red planet
Yellow Planet
Комментарии к примеру.
- При помощи метода getElementById был получен доступ к элементу страницы с индексом >»sun» , то есть к последнему параграфу — тегу p .
- Результат заносим в переменную planet . Напомним, что в переменную заносится ссылка на указанный элемент страницы, с которым через переменную planet можно работать как с объектом .
- Далее при помощи свойства innerHTML «объекта» planet мы собираемся изменить содержимое выбранного элемента (то есть изменить текст абзаца с индексом >. Но этого сделать нельзя, так как javascript-код расположен в начале страницы — в теге head. И если заглянуть в веб-консоль браузера(в Firefox это путь Инструменты — Веб-разработка — Веб-консоль или комбинация Ctrl+Shift+K), то мы увидим: TypeError: planet is null .
Вспомним, о чем говорилось ранее: JavaScript -код следует располагать в конце веб-документа. Но речь на этой странице не об этом . Дело в том, что в JavaScript есть возможность заставить работать код, расположенный в начале страницы . Но при условии ее полной загрузки. Об этом далее.
Свойство onload объекта Window — Функция init
Итак, для того, чтобы JavaScript -код, расположенный в начале страницы, выполнялся, необходимо поместить его в функцию init (не обязательное имя функции), которая в свою очередь присваивается свойству onload объекта Window .
Стоит отметить : само по себе название функции init ничего не значит (оно может быть любым). Просто оно используется в таких случаях по традиции.
Фрагмент кода
function init ()
var planet = document . getElementById ( «sun» );
planet . innerHTML = «Sun is yellow planet» ;
window . onload = init ;
Our Planet
«earth» > Green Planet
Red Planet
«mars» > Mars is red planet
Yellow Planet
Our Planet
Red Planet
Mars is red planet
Yellow Planet
Sun is yellow planet
Комментарии к примеру.
Здесь JavaScript -код расположенный в начале страницы, сначала поместили в функцию init.
Теперь браузер сначала загружает всю веб-страницу, строит DOM-дерево, и только после этого включается в работу JavaScript -код расположенный в начале страницы.
Функция обратного вызова или обработчик событий
Использование функции onload — это стандартный прием в программировании. Он применяется, когда необходимо сначала узнать о каком-либо событии , а потом выполнить код .
Этот прием называется функцией обратного вызова или обработчиком событий.
В примере, который здесь рассматривался, событием является полная загрузка документа в окне браузера.
После загрузки страницы выполняется JavaScript -код.
О том, что страница полностью загружена, знает браузер, а точнее объект Window . Так вот работа функции обратного вызова основывается на том, что она передается объекту, который знает о событии.
Как только событие возникает , объект вызывает переданную ему функцию .
Итак, в нашем случае:
— загружается веб-страница, т.е. происходит событие;
— свойство onload объекта Window вызывает функцию init;
— выполняется JavasScript -код, содержащийся в функции.
site.komp36.ru Как работать на себя? Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
Читайте также.
Свойство length — число элементов массива
Объект Window и свойство window
Что нужно для изучения javascript?
Метод write() объекта document
Метод open объекта Window — Дочернее окно
Практическая задача — методы объекта Window
site.komp36.ru Как работать на себя? Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
Загрузка документа document ready, DOMContentLoaded и onload
В JS, манипуляции с тегами рекомендуется выполнять после полной загрузки DOM-дерева. Для этого есть события DOMContentLoaded и onload, в jQuery функция ready, рассмотрим их применение.
jQuery document ready
Сработает как только браузер полностью загрузит HTML и построит DOM-дерево.
$(document).ready(function()< console.log('Готов!'); >);Сокращенный аналог
$(function()< console.log('Готов!'); >);