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

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

255 голосов
/ 23 июня 2009

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

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

Ответы [ 11 ]

361 голосов
/ 23 июня 2009

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

window.onload = function () { alert("It's loaded!") }
30 голосов
/ 23 июня 2009

Обычно вы можете использовать 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();">
14 голосов
/ 24 мая 2016

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

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

Подробнее: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

14 голосов
/ 30 июля 2015

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

По Javascript 

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

По Jquery 

$(window).bind("load", function() {
    // code goes here
});
8 голосов
/ 31 октября 2013

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

<body onload="somecode();" >

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

$(document).ready(function() {
    // jQuery code goes here
});
8 голосов
/ 28 февраля 2013

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

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

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

8 голосов
/ 23 июня 2009

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

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

6 голосов
/ 23 июня 2009

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

3 голосов
/ 23 июня 2009

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

Event.observe(window, 'load', function(event) {
    // Do stuff
});
1 голос
/ 13 октября 2017

Свойство onload миксина 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;
};
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...