выполнение кода js после загрузки страницы
Как вызвать функцию JavaScript при загрузке страницы?
Традиционно, чтобы вызвать функцию JavaScript после загрузки страницы, вы должны добавить атрибут onload к телу, содержащему немного JavaScript (обычно это только вызов функции)
Есть ли другой способ вызвать функцию JavaScript при загрузке? Я бы предпочел не использовать jQuery, так как я не очень знаком с ним.
8 ответов
Если вы хотите, чтобы метод onload принимал параметры, вы можете сделать что-то похожее на это:
Это связывает нагрузку с анонимной функцией, которая при вызове будет запускать желаемую функцию с любыми параметрами, которые вы ей дадите. И, конечно, вы можете запустить более одной функции изнутри анонимной функции.
Для обнаружения загруженного HTML-кода (с сервера), вставленного в DOM, используйте MutationObserver или определяйте момент в функции loadContent, когда данные готовы к использованию.
Вы должны вызвать функцию, которую вы хотите вызвать при загрузке (то есть загрузка документа / страницы). Например, функция, которую вы хотите загрузить, когда загрузка документа или страницы называется «yourFunction». Это можно сделать, вызвав функцию при событии загрузки документа. Пожалуйста, смотрите код ниже для более подробной информации.
Попробуйте следующий код:
Ваш первоначальный вопрос был неясен, если предположить, что правка / интерпретация Кевина верна, тогда этот первый вариант не применим
Вы также можете разместить свой javascript в самом конце тела; он не начнет выполняться, пока документ не будет готов.
function () Анонимная функция, будет вызываться при возникновении события.
Выполнение (запуск) скрипта после загрузки страницы на jQuery/JavaScript
Какая-либо написанная функция при загрузке вашего сайта может сработать некорректно, и случается это потому, что контент вашего сайта не успел полностью прогрузиться на стороне пользователя, как скрипт уже закончил свою работу.
Исправить это можно, если отложить выполнение скрипта до полной загрузки страницы или DOM.
Запуск скрипта после загрузки DOM (Document Object Model) на jQuery/JavaScript
Для того чтобы браузер смог отобразить страницу вашего (и не только) сайта, ему необходимо построить DOM-дерево. Формируется оно за счет получения и разбора HTML-документа.
В тот момент, когда DOM готов (медиафайлы при этом могут быть еще не загружены) мы можем начать «играть» с нашими скриптами.
В jQuery состояние готовности DOM можно определить с помощью функции ready:
Сокращенная форма записи:
Как вы могли заметить, он основан на событии DOMContentLoaded.
Запуск скрипта после полной загрузки страницы на jQuery/JavaScript
Полная загрузка страницы подразумевает под собой и готовность DOM и полную загрузку всех медиафайлов, например таких, как изображения.
Отследить этот момент в jQuery можно с помощью обработчика события load:
Аналогичный вариант на JavaScript:
Если же вы хотите помимо выполнения скрипта после загрузки страницы сделать неоднократное выполнение функции с заданным интервалом времени, воспользуйтесь этой статьей.
Запуск скрипта после загрузки страницы (DOM)
Есть скрипт, который должен запуститься после загрузки DOM, так как в нём есть обращение к DOM:
Как мне запустить данный скрипт, чтобы обращение скрипта к DOM сработало?
2 ответа 2
Для тех, кто не знает, почему не работают скрипты с обращением к элементам вида :
Скрипт пытается взаимодействовать с HTML-элементами на странице, которые находятся ниже по коду, чем сам скрипт. Соответственно, скрипт уже подгрузился, а элемент, с которым нужно будет взаимодействовать, еще нет. По этой причине ничего работать не будет.
Особенность языка Javascript в том, что его код выполняется последовательно, строка за строкой, как они написаны в исходном коде.
Варианты решения данного вопроса:
Один из простых способов ― перенести в body после всех элементов. При таком расположении сначала загрузится DOM, а потом скрипт. Пример:
Но у этого метода есть недостаток: если на странице сайта куча картинок, которые грузятся пол часа, то скрипт выполнится только после того, как загрузятся все картинки и это может занят много времени.
Ещё одним минусом является то, что нельзя указывать несколько функций таким образом. Т.е. если вы два раза использовали window.onload в коде, то вторая функция сотрёт первую. Но, чтобы это исправить, я сочинил интересный костыль:
Интересный вариант ― что-то между первым и вторым пунктом. Создать особую функцию и вызывать её через скрипт в конце body. Пример:
Поддержка этого метода начинается с IE9+
Ну и подошли варианты с библиотеками. И первая наша библиотека JQuery ScriptJava. Пример:
Самый действенный вариант ― самописная функция со enStackOverflow. Работает в IE8:
var ready = (function()<
> // The DOM ready check for Internet Explorer function doScrollCheck()
И наконец самый странный и не всегда рабочий вариант ― использовать setTimeout. Пример:
Это все варианты, которые я встречал, но возможно не единственный, так как другие программисты могли придумать свои функции для решения данной задачи.
Жизненный цикл страницы: DOMContentLoaded, load, beforeunload, unload
Жизненный цикл HTML-страницы состоит из трех важных событий:
Каждое событие может использоваться для различных целей:
Рассмотрим эти события подробнее.
DOMContentLoaded
В этом примере обработчик DOMContentLoaded запускается при загрузке документа ( не при JavaScript onload ), и не ждет полной загрузки страницы. Таким образом, предупреждение сообщает, что размер изображений равен нулю.
На первый взгляд событие DOMContentLoaded простое. Но есть несколько особенностей.
DOMContentLoaded и скрипты
Когда браузер загружает HTML и встречает в коде
Поскольку DOMContentLoaded ожидает загрузки скриптов ( document onload JavaScript ), он должен дождаться и загрузки стилей.
Автоматическое заполнение браузерами
Одно из незначительных преимуществ использования атрибутов async и defer для внешних скриптов заключается в том, что они не блокируют DOMContentLoaded и позволяют избежать задержки, связанной с автоматическим заполнением форм.
window.onload
Событие window onload JavaScript запускается после полной загрузки страницы, включая стили, изображения и другие ресурсы.
В приведенном ниже примере правильно отображаются размеры изображений, так как window.onload ожидает загрузки всех изображений:
window.onunload
window.onbeforeunload
Если посетитель покидает страницу или пытается закрыть окно, обработчик beforeunload может запросить дополнительное подтверждение. Этот обработчик возвращает строку с вопросом. Браузер отобразит ее.
readyState
Что произойдет, если установить обработчик DOMContentLoaded после загрузки документа? Естественно, он никогда не запустится.
Бывают случаи, когда непонятно, готов ли документ. Например, внешний скрипт с атрибутом async загружается и запускается асинхронно. В зависимости от сети он может загружаться и выполняться до завершения загрузки документа или после этого. Поэтому необходимо знать текущее состояние документа.
Свойство document.readyState предоставляет такую информацию. Возможны три значения:
Так можно проверить значение document.readyState и настроить обработчик или выполнить код немедленно, как только он будет готов.
Например, следующим образом:
Событие readystatechange запускается при изменении состояния. Можно выводить все эти состояния следующим образом:
Событие readystatechange является альтернативным методом отслеживания состояния загрузки документа, оно было введено давно. В настоящее время оно редко используется, но рассмотрим его для полноты картины.
Стандартная последовательность событий:
Цифры в квадратных скобках обозначают приблизительное время, когда это происходит. Реальное время немного больше, но события с одинаковой цифрой срабатывают примерно в одно и то же время ( ± несколько миллисекунд ).
Заключение
События жизненного цикла страницы:
— Выполняются все скрипты, кроме внешних, подключаемых с использованием атрибутов async или defer ;
— Изображения и другие ресурсы могут увеличивать время загрузки.
Пожалуйста, оставьте ваши комментарии по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, лайки, отклики, подписки, дизлайки!
Страница: DOMContentLoaded, load, beforeunload, unload
У жизненного цикла HTML-страницы есть три важных события:
Каждое из этих событий может быть полезно:
Давайте рассмотрим эти события подробнее.
DOMContentLoaded
Но он не дожидается, пока загрузится изображение. Поэтому alert покажет нулевой размер.
На первый взгляд событие DOMContentLoaded очень простое. DOM-дерево готово – получаем событие. Хотя тут есть несколько особенностей.
DOMContentLoaded и скрипты
Когда браузер обрабатывает HTML-документ и встречает тег
В примере выше мы сначала увидим «Библиотека загружена…», а затем «DOM готов!» (все скрипты выполнены).
Есть два исключения из этого правила:
DOMContentLoaded и стили
Внешние таблицы стилей не затрагивают DOM, поэтому DOMContentLoaded их не ждёт.
Но здесь есть подводный камень. Если после стилей у нас есть скрипт, то этот скрипт должен дождаться, пока загрузятся стили:
Причина в том, что скрипту может понадобиться получить координаты или другие свойства элементов, зависящих от стилей, как в примере выше. Естественно, он должен дождаться, пока стили загрузятся.
Так как DOMContentLoaded дожидается скриптов, то теперь он так же дожидается и стилей перед ними.
Встроенное в браузер автозаполнение
Например, если на странице есть форма логина и пароля и браузер запомнил значения, то при наступлении DOMContentLoaded он попытается заполнить их (если получил разрешение от пользователя).
window.onload
Событие load на объекте window наступает, когда загрузилась вся страница, включая стили, картинки и другие ресурсы.
В примере ниже правильно показаны размеры картинки, потому что window.onload дожидается всех изображений:
window.onunload
Обычно здесь отсылают статистику.
Предположим, мы собрали данные о том, как используется страница: клики, прокрутка, просмотры областей страницы и так далее.
Естественно, событие unload – это тот момент, когда пользователь нас покидает и мы хотим сохранить эти данные.
Его можно использовать вот так:
К тому моменту, как sendBeacon завершится, браузер наверняка уже покинет страницу, так что возможности обработать ответ сервера не будет (для статистики он обычно пустой).
Для таких запросов с закрывающейся страницей есть специальный флаг keepalive в методе fetch для общих сетевых запросов. Вы можете найти больше информации в главе Fetch API.
window.onbeforeunload
Если посетитель собирается уйти со страницы или закрыть окно, обработчик beforeunload попросит дополнительное подтверждение.
Если мы отменим это событие, то браузер спросит посетителя, уверен ли он.
Вы можете попробовать это, запустив следующий код и затем перезагрузив страницу:
По историческим причинам возврат непустой строки так же считается отменой события. Когда-то браузеры использовали её в качестве сообщения, но, как указывает современная спецификация, они не должны этого делать.
Поведение было изменено, потому что некоторые веб-разработчики злоупотребляли этим обработчиком события, показывая вводящие в заблуждение и надоедливые сообщения. Так что, прямо сейчас старые браузеры всё ещё могут показывать строку как сообщение, но в остальных – нет возможности настроить показ сообщения пользователям.
readyState
Что произойдёт, если мы установим обработчик DOMContentLoaded после того, как документ загрузился?
Естественно, он никогда не запустится.
Есть случаи, когда мы не уверены, готов документ или нет. Мы бы хотели, чтобы наша функция исполнилась, когда DOM загрузился, будь то сейчас или позже.
Свойство document.readyState показывает нам текущее состояние загрузки.
Есть три возможных значения:
Так что мы можем проверить document.readyState и, либо установить обработчик, либо, если документ готов, выполнить код сразу же.
Событие readystatechange – альтернативный вариант отслеживания состояния загрузки документа, который появился очень давно. На сегодняшний день он используется редко.
Для полноты картины давайте посмотрим на весь поток событий:
Рабочий пример есть в песочнице.
Цифры в квадратных скобках обозначают примерное время события. События, отмеченные одинаковой цифрой, произойдут примерно в одно и то же время (± несколько миллисекунд).