Как выполнить функцию, когда страница полностью загружена?

307

Мне нужно выполнить код JavaScript, когда страница полностью загружена. Это включает в себя такие вещи, как изображения.

Я знаю, что вы можете проверить, готов ли DOM, но я не знаю, совпадает ли это с тем, когда страница полностью загружена.

javascript Бен Шелок
источник

7

Итак, как проверить, готов ли DOM?

Мадс Скьерн

442

Это называется load. Это произошло до того, как появился DOM ready, и DOM ready был фактически создан именно по той причине, которая loadждала изображения.

window.addEventListener('load', function () {
  alert("It's loaded!")
})

Matchu
источник

3

так, просто чтобы уточнить (если позволите), по сравнению с DOM ready, window.onloadвызывается каждый компонент страницы / ресурс (т.е. * включая * изображения). Я прав?

BreakPhreak

19

@BreakPhreak: да :) onloadждет всех ресурсов, которые являются частью документа. Это, конечно, исключает динамически создаваемые запросы, которые не являются частью самого документа, например, запрос AJAX.

Matchu

3

Скрипт загружен не полностью

HD ..

Что если мой скрипт может быть загружен динамически, и событие «load» произошло до того, как я добавлю свой обработчик?

Памелус

31

Лучшим способом было бы addEventListener("load", function(){... })вместо перезаписи onloadсвойства.

user4642212

30

Обычно вы можете использовать window.onload, но вы можете заметить, что последние браузеры не запускаются window.onloadпри использовании кнопок истории назад / вперед.

Некоторые люди предлагают странные искажения, чтобы обойти эту проблему, но на самом деле, если вы просто создадите window.onunloadобработчик (даже тот, который ничего не делает), это поведение кэширования будет отключено во всех браузерах. MDC документы этой «особенность» очень хорошо, но по какой - то причине все еще есть люди , использующие setIntervalи другое странное хаки.

В некоторых версиях Opera есть ошибка, которую можно обойти, добавив следующее где-то на вашей странице:

<script>history.navigationMode = 'compatible';</script>

Если вы просто пытаетесь получить функцию javascript, вызываемую один раз для каждого просмотра (и не обязательно после завершения загрузки DOM), вы можете сделать что-то вроде этого:

<img src="javascript:location.href='javascript:yourFunction();';">

Например, я использую этот трюк для предварительной загрузки очень большого файла в кэш на экране загрузки:

<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">

geocar
источник

Кто-нибудь может уточнить, как работает этот трюк ? Слишком сложно для меня, дох ..

Раззл

20

Для полноты картины вы также можете привязать его к DOMContentLoaded, который сейчас широко поддерживается.

document.addEventListener("DOMContentLoaded", function(event){
  // your code here
});

Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

murb
источник

7

Этот ответ в точности противоположен тому, что было задано в вопросе.

Мухаммед бин Юсрат

2

Действительно, событие DOMContentLoaded запускается, когда все содержимое DOM было загружено до того, как оно загрузило все свои зависимости. Поскольку пользователи в теме ответов ссылались, $.readyя думал, что это внесло хороший вклад. Btw. Я бы также использовал addEventListener-method для loadсобытия, так как он позволяет вам иметь несколько обратных вызовов:window.addEventListener("load", function(event){ // your code here });

murb

16

Попробуйте это только запустить после загрузки всей страницы

По Javascript

window.onload = function(){
    // code goes here
};

По Jquery

$(window).bind("load", function() {
    // code goes here
});

absiddiqueLive
источник

1

$(window)заставляет меня думать, что это будет JQuery - верно? Или я путаю синтаксис JavaScript? (Я новичок в JS).

Азендейл

2

почему бы просто не использовать, $(document).ready();когда jQuery доступен?

Андреас

ваш - это документ (более или менее просто разобранный HTML), другой («загрузка») - это все, включая изображения и стили. Зависит от того, что вам нужно.

amenthes

11

Попробуйте этот код

document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}

посетите https://developer.mozilla.org/en-US/docs/DOM/document.readyState для получения дополнительной информации

Джейкоб Нельсон
источник

Да, это полезно. Большое спасибо ~

Браво

2

"interactive"не полностью загружен. "complete"полностью загружен

Райан Уокер

Наконец! Спасибо миллион, Джейкоб. Все многочисленные методы, перечисленные здесь, потерпели неудачу (в лучшем случае, радиокнопка была бы обновлена, и результирующий расчет мог бы быть сделан, но кнопка не выглядела бы нажатой), ваш метод делает свое дело.

SECR

8

событие window.onload срабатывает при загрузке всего, включая изображения и т. д.

Вы хотели бы проверить состояние готовности DOM, если хотите, чтобы ваш js-код выполнялся как можно раньше, но вам все равно нужен доступ к элементам DOM.

codefly
источник

8

Javascript, использующий onLoad()событие, будет ожидать загрузки страницы перед выполнением.

<body onload="somecode();" >

Если вы используете функцию готовности документа в инфраструктуре jQuery, код будет загружен сразу после загрузки DOM и до загрузки содержимого страницы:

$(document).ready(function() {
    // jQuery code goes here
});

Defoncesko
источник

7

Возможно, вы захотите использовать window.onload , так как в документах указано, что он не запускается до тех пор, пока DOM не будет готов и ВСЕ другие ресурсы на странице (изображения и т. Д.) Не загружены.

Марк Новаковский
источник

Ах, блестящий. Ну, я сделал это. Последнее изображение на странице: <img src = "imdbupdate.php? Update = ajax" style = "display: hidden" onload = "window.location = 'movies.php? Do = admincp'" /> Однако это не переадресовывает меня

Бен Шлок

...какие? Вы хотите перенаправить, как только изображение загружается?

Матчу

Я не уверен, почему вы этого хотите, но причина, по которой он не перенаправляется, может заключаться в том, что он отображает: скрытый, и поэтому браузер не загружает его, так как он не будет отображаться.

Матчу

может быть, это просто скрытое изображение, которое делает что-то важное на сервере, например, отслеживает попадание или что-то делает в БД?

Марк Новаковски

Я могу получить это, но перенаправление после этого не имеет смысла для меня. Зачем вообще нужна страница, если вы не хотите, чтобы пользователь проводил на ней время? И если цель состоит в том, чтобы перенаправить при загрузке, почему бы просто не использовать событие window.onload, поскольку в целом это более чистая реализация?

Матчу

3

И вот способ сделать это с PrototypeJS :

Event.observe(window, 'load', function(event) {
    // Do stuff
});

Марк Бик
источник

2

В современных браузерах с современным javascript (> = 2015) вы можете добавить type="module"в свой скрипт скрипт, и все внутри этого скрипта будет выполняться после загрузки всей страницы. например:

<script type="module">
  alert("runs after") // Whole page loads before this line execute
</script>
<script>
  alert("runs before")
</script>

также старые браузеры будут понимать nomoduleатрибут. Что-то вроде этого:

<script nomodule>
  alert("tuns after")
</script>

Для получения дополнительной информации вы можете посетить javascript.info .

Поурия Моосави
источник

1

Если вам нужно использовать много `onload`использовать `$(window).load`вместо (jQuery):

$(window).load(function() {
    //code
});

Себастьян Хорин
источник

1

Свойство onload миксина GlobalEventHandlers является обработчиком событий для события загрузки Window, XMLHttpRequest, элемента и т. Д., Которое срабатывает при загрузке ресурса.

Таким образом, в основном javascript уже имеет метод onload для окна, которое выполняется, какая страница полностью загружена, включая изображения ...

Вы можете сделать что-то:

var spinner = true;

window.onload = function() {
  //whatever you like to do now, for example hide the spinner in this case
  spinner = false;
};

Алиреза
источник

-1

Обновление 2019 года: это был ответ, который работал для меня. Поскольку мне нужно было несколько запросов ajax, чтобы сначала запустить и вернуть данные, чтобы посчитать элементы списка.

$(document).ajaxComplete(function(){
       alert("Everything is ready now!");
});

Norcal Johnny
источник

Как выполнить функцию, когда страница полностью загружена?

Ответы:

Если вам нужно использовать много onloadиспользовать $(window).loadвместо (jQuery):

Если вам нужно использовать много `onload`использовать `$(window).load`вместо (jQuery):