it-swarm.com.ru

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

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

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

611
Robinicks

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

<body onload="script();">

или же

document.onload = function ...

или даже

window.onload = function ...

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

704
marcgg

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

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;
    }
}
185
chaos

Имейте в виду, что загрузка страницы имеет более одного этапа. Кстати, это чистый 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/DOMContentLoadedhttps://developer.mozilla.org/en-US/docs/Web/ События/нагрузки

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

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

115
DevWL

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

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

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

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

or 

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

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

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

111
Nordes

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

Пример:

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

От https://developer.mozilla.org :

отложить

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

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

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

49
Daniel Price

Вот скрипт, основанный на отложенной загрузке 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 на pagepeed, а также на основе этой статьи отложенная загрузка javascript

25
Lucky

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

20
Daniel A. White

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

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

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>    
</html>
6
Aamir Shahzad
document.onreadystatechange = function(){
     if(document.readyState === 'complete'){
         /*code here*/
     }
}

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

6
Arthur

Лучший метод, рекомендованный 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

6
Frankey

Если вы используете JQuery,

$(function() {...});

эквивалентно

$(document).ready(function () { })

Смотрите Какое событие запускает JQuery $ function ()?

5
Benjamin Crouzier

Иногда на более сложных страницах я обнаруживаю, что не все элементы загружены к временному окну. Запущена загрузка. Если это так, добавьте setTimeout до того, как ваша функция задержится на мгновение. Это не элегантно, но это простой взлом, который хорошо рендерится.

window.onload = function(){ doSomethingCool(); };

становится ...

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
4
Charles Jaimet
<body onload="myFunction()">

Этот код работает хорошо.

Но метод window.onload имеет различные зависимости. Так что это может не работать все время.

4
Akarsh Satija

Просто определите <body onload="aFunction()">, который будет вызываться после загрузки страницы. Ваш код в сценарии содержит aFunction() { }.

4
Norbert Hartl

$ (окно) .on ("загрузка", функция () {...});

. ready () лучше всего работает для меня.

$(document).ready(function(){ ... });

. load () будет работать, но не будет ждать загрузки страницы.

jQuery(window).load(function () { ... });

У меня не работает, ломает следующий встроенный скрипт. Я также использую jQuery 3.2.1 вместе с некоторыми другими вилками jQuery.

Чтобы скрыть загрузку моих сайтов, я использую следующее:

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
4
Zach Reynolds

Используя библиотека YUI (мне это нравится):

YAHOO.util.Event.onDOMReady(function(){
    //your code
});

Портативный и красивый! Однако, если вы не используете YUI для других вещей (см. Его документацию), я бы сказал, что его не стоит использовать.

Нотабене : чтобы использовать этот код, вам нужно импортировать 2 скрипта

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>
3
Valentin Jacquemin

Существует очень хорошая документация о том, как определить, загружен ли документ с использованием Javascript или Jquery.

Используя нативный Javascript, этого можно достичь

if (document.readyState === "complete") {
 init();
 }

Это также можно сделать внутри интервала

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

Например, Mozilla

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

Использование Jquery Чтобы проверить только готов DOM

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

Чтобы проверить, все ли ресурсы загружены, используйте window.load

 $( window ).load(function() {
        console.log( "window loaded" );
    });
3
user5642061

Используйте этот код с библиотекой jQuery, это будет прекрасно работать.

$(window).bind("load", function() { 

  // your javascript event

});
2
Harish Kumar
<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event here

});
</script>
1
Vô Vị

Мой совет использовать атрибут asnyc для тега скрипта, который поможет вам загрузить внешние скрипты после загрузки страницы

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
1
Kalidass

Как говорит Даниэль, вы можете использовать document.onload.

Различные фреймворки javascript, однако (jQuery, Mootools и т.д.) Используют пользовательское событие 'domready', которое, я думаю, должно быть более эффективным. Если вы разрабатываете с использованием javascript, я настоятельно рекомендую использовать фреймворк, он значительно увеличит вашу производительность.

1
Iain

использовать функцию самостоятельного выполнения onload

window.onload = function (){
    /* statements */
}();   
0
user7087840