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

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

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

Ответ 1

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

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

Ответ 2

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

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

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

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

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

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

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

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

Ответ 3

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

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

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

Ответ 4

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

По Javascript

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

По JQuery

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

<body onload="somecode();" >

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

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

Свойство onload для Mixin GlobalEventHandlers - это событие обработчик для события загрузки Окно, 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;
};

Ответ 12

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

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

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

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

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

Ответ 13

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

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