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

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

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

543
html javascript javascript-events pageload

24 ответов

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

<body onload="script();">

или

document.onload = function ...

или даже

window.onload = function ...

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

624

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

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;
    }
}
177

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

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

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

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

or 

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

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

обратите внимание, что $(окно).загрузка будет выполнена после того, как документ будет отображен на Вашей странице.

108

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

"DOMContentLoaded"

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

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

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

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

"загрузить"

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

Exectues после все загружается и парсится: 

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

80

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

пример:

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

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

отложить

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

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

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

47

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

Я написал это на основе после слова defer загрузка JavaScript pagespeed концепция google, а также получены из этой статьи отложить загрузку javascript

22

посмотреть подсекать document.onload или в jQuery $(document).load(...).

20

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

Рабочая Скрипку

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

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>    
</html>
6

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

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

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

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

посмотреть какое событие запускает jQuery $function ()?

4
<body onload="myFunction()">

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

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

4
document.onreadystatechange = function(){
     if(document.readyState === 'complete'){
         /*code here*/
     }
}

смотрите сюда:http://msdn.microsoft.com/en-us/library/ie/ms536957 (v=против 85).aspx

4

просто определить <body onload="aFunction()"> Это будет вызвано после загрузки страницы. Ваш код в скрипте чем заключен в aFunction() { }.

4

С помощью Юи библиотека (мне это нравится):

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

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

N. B. : Для использования этого кода необходимо импортировать 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

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

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

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

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
3

есть очень хорошая документация о том, как определить, если документ загружен использование 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(function() {
        console.log( "window loaded" );
    });
3

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

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

  // your javascript event

});
2

$(окно).on("load", function(){ ... });

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

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

будет работать, но он не будет ждать, пока страница будет загружена.

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

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

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

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

<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event here

});
</script>
2

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

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

1

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

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

jQuery обертки, которые для вас. Вы, вероятно, найдете это самым простым решением.

0

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

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

/ / Он протестирован и работает:)

$(документ).готовые(функция() { functon1(); функция2() });

-3