Как запустить JavaScript после загрузки страницы?
Я выполняю внешний скрипт, используя тег <script> внутри <head>.
Проблема в том, что скрипт исполняется до полной загрузки страницы, и я не могу получить доступ к <body> и другим элементам. Мне нужно выполнить некоторый JavaScript после того, как документ был "загружен" (HTML полностью скачан и находится в памяти). Существуют ли события, к которым я могу подключиться при выполнении моего скрипта, чтобы они срабатывали при загрузке страницы?
5 ответ(ов)
Можно использовать следующий код для установки функции, которая будет выполняться при загрузке страницы, без зависимости от какого-либо фреймворка и с хорошей переносимостью:
if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
yourFunctionName(evt);
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}
Этот код проверяет, поддерживает ли браузер метод attachEvent. Если поддерживает, то он использует его для привязки вашей функции к событию загрузки. В противном случае он проверяет, существует ли уже функция, назначенная на событие onload. Если такая функция существует, он создаёт новую функцию, которая сначала вызывает старую, а затем вашу функцию. Если onload ещё не задан, он просто назначает вашу функцию. Это обеспечивает корректную работу на различных браузерах.
Вы можете использовать атрибут "onload" внутри тега <body> следующим образом:
<body onload="myFunction()">
Если вы используете jQuery, вы можете реализовать это так:
$(document).ready(function(){ /* код здесь */ });
или
$(window).load(function(){ /* код здесь */ });
Надеюсь, это ответит на ваш вопрос.
Обратите внимание, что $(window).load будет выполняться после полной загрузки документа на вашей странице.
Посмотрите на использование события onload для документа или в jQuery используйте $(document).ready(...) вместо $(document).load(...), так как последний метод считается устаревшим. Событие onload сработает, когда весь контент страницы загружен, а метод ready в jQuery позволяет вам выполнять скрипты, как только DOM доступен, что часто бывает раньше, чем загружены все изображения и ресурсы. Вот пример:
// Vanilla JavaScript
window.onload = function() {
// Ваш код здесь
};
// jQuery
$(document).ready(function() {
// Ваш код здесь
});
Это обеспечит правильное выполнение вашего кода, как только структура документа будет подготовлена.
В вашем вопросе приведен код на JavaScript и jQuery, который обрабатывает события загрузки страницы. Давайте разберем детально оба примера.
JavaScript
В приведенном коде используются события readystatechange, чтобы реагировать на изменения состояния готовности документа:
document.addEventListener('readystatechange', event => {
// Когда HTML/DOM элементы готовы:
if (event.target.readyState === "interactive") { // аналогично: ..addEventListener("DOMContentLoaded")..
alert("hi 1");
}
// Когда окно загружено (внешние ресурсы тоже загружены - `css`, `src` и т.д.)
if (event.target.readyState === "complete") {
alert("hi 2");
}
});
interactive— это состояние, когда DOM полностью загружен и доступен, но внешние ресурсы (например, изображения, стили) еще могут загружаться.complete— это состояние, когда полностью загружены как DOM, так и все внешние ресурсы.
jQuery
В jQuery аналогичные события обрабатываются с помощью методов .ready() и .load():
$(document).ready(function() { // также как: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});
$(document).ready(...)— этот метод будет вызван, когда DOM полностью загружен, аналогичноinteractiveв JavaScript.$(window).load(...)— этот метод срабатывает, когда загружены все ресурсы окна (например, все изображения и стили).
Важно!
Обратите внимание на примечание: не используйте конструкцию document.onreadystatechange = ..., потому что это перезаписывает другие аналогичные объявления и может привести к потере функциональности.
Если у вас возникнут дополнительные вопросы по работе с событиями загрузки страницы, не стесняйтесь задать их!
На некоторых более сложных страницах я замечал, что не все элементы успевают загрузиться к моменту срабатывания события window.onload. Если это так, вы можете добавить setTimeout перед вызовом вашей функции, чтобы немного задержать выполнение. Это не самый элегантный способ, но это простой хак, который работает.
Ваш код:
window.onload = function(){ doSomethingCool(); };
можно изменить на:
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
Таким образом, функция doSomethingCool будет вызвана через 1 секунду после загрузки страницы, что даст время для полной загрузки всех элементов.
Получить координаты (X,Y) HTML-элемента
Как изменить класс элемента с помощью JavaScript?
Эквивалент document.createElement в jQuery?
Как определить, виден ли элемент DOM в текущей области просмотра?
Как выбрать элемент по имени с помощью jQuery?