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

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

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

24 543
javascript html 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 после того, как дом будет загружен (перед 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

Я написал это на основе отложена загрузка 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=vs. 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

Я иногда нахожу на более сложных страницах, что не все элементы были загружены к временному окну.onload срабатывает. Если это так, добавьте 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

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

различные 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