JavaScript, который выполняется после загрузки страницы - PullRequest
Новая
       58

JavaScript, который выполняется после загрузки страницы

613 голосов
/ 30 апреля 2009

Я выполняю внешний скрипт, используя <script> внутри <head>.

Теперь, так как скрипт выполняет до загрузки страницы, я не могу получить доступ к <body>, между прочим. Я хотел бы выполнить JavaScript после того, как документ был «загружен» (HTML полностью загружен и находится в оперативной памяти). Есть ли какие-либо события, которые я могу подключить при выполнении моего скрипта, которые сработают при загрузке страницы?

Ответы [ 22 ]

705 голосов
/ 30 апреля 2009

Эти решения будут работать: 

<body onload="script();">

или 

document.onload = function ...

или даже 

window.onload = function ...

Обратите внимание, что последний вариант - лучший путь , поскольку он ненавязчив и считается более стандартным .

186 голосов
/ 30 апреля 2009

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

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;
    }
}
116 голосов
/ 19 марта 2016

Имейте в виду, что загрузка страницы имеет более одного этапа. Кстати, это чистый JavaScript

"DOMContentLoaded"

Это событие вызывается, когда исходный HTML-документ полностью загружен и проанализирован , не дожидаясь окончания загрузки таблиц стилей, изображений и подкадров. На этом этапе вы можете программно оптимизировать загрузку изображений и CSS на основе пользовательского устройства или скорости полосы пропускания.

Exectues после загрузки DOM (до img и css): 

document.addEventListener("DOMContentLoaded", function(){
    //....
});

Примечание. Синхронный JavaScript приостанавливает анализ DOM. Если вы хотите, чтобы DOM обрабатывался как можно быстрее после того, как пользователь запросил страницу, вы можете включить асинхронный JavaScript и , оптимизировать загрузку таблиц стилей

"нагрузка"

Совершенно другое событие, load , должно использоваться только для обнаружения полностью загруженной страницы . Это невероятно популярная ошибка - использовать load, когда DOMContentLoaded будет гораздо более подходящим, поэтому будьте осторожны.

Ожидает после того, как все загружено и проанализировано: 

window.addEventListener("load", function(){
    // ....
});

Ресурсы MDN:

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

MDN список всех событий:

https://developer.mozilla.org/en-US/docs/Web/Events

112 голосов
/ 30 апреля 2009

Вы можете поместить атрибут "onload" в тело 

...<body onload="myFunction()">...

Или, если вы используете jQuery, вы можете сделать 

$(document).ready(function(){ /*code here*/ }) 

or 

$(window).load(function(){ /*code here*/ })

Надеюсь, это ответит на ваш вопрос.

Обратите внимание, что $ (window) .load будет выполняться после отображения документа на вашей странице.

49 голосов
/ 10 января 2014

Если сценарии загружаются в пределах <head> документа, то возможно использовать атрибут defer в теге сценария.

Пример: 

<script src="demo_defer.js" defer></script>

С https://developer.mozilla.org:

отложить

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

Этот атрибут не должен использоваться, если src атрибут отсутствует (то есть для встроенных скриптов), в этом случае он будет не имеет никакого эффекта.

Для достижения аналогичного эффекта для динамически вставляемых скриптов используйте вместо async = false. Скрипты с атрибутом defer будут выполняться в порядок, в котором они появляются в документе.

25 голосов
/ 05 февраля 2013

Вот скрипт, основанный на отложенной загрузке js после загрузки страницы, 

<script type="text/javascript">
  function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "deferredfunctions.js";
      document.body.appendChild(element);
  }

  if (window.addEventListener)
      window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
      window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

Где это разместить?

Вставьте код в HTML непосредственно перед тегом </body> (в нижней части HTML-файла).

Что это делает?

Этот код говорит: подождите, пока загрузится весь документ, затем загрузите внешний файл deferredfunctions.js.

Вот пример кода выше - Отсрочка рендеринга JS

Я написал это, основываясь на исправленной загрузке javascript концепцию gps на скорости страницы, а также на основе этой статьи Отложенная загрузка JavaScript

20 голосов
/ 30 апреля 2009

Посмотрите на перехват document.onload или в jQuery $(document).load(...).

7 голосов
/ 11 сентября 2014 
document.onreadystatechange = function(){
     if(document.readyState === 'complete'){
         /*code here*/
     }
}

смотрите здесь: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx

6 голосов
/ 26 марта 2013

Рабочая скрипка 

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
   alert("Page is loaded");
}
</script>
</head>

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>    
</html>
6 голосов
/ 11 сентября 2014

Лучший метод, рекомендованный Google также. :) 

<script type="text/javascript">
  function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "defer.js";
   document.body.appendChild(element);
  }
  if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
   window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...