Как заставить JavaScript работать после загрузки страницы?

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

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

+651
источник поделиться
24 ответа

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

<body onload="script();">

или

document.onload = function ...

или даже

window.onload = function ...

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

+742
источник

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

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;
    }
}
+186
источник
другие ответы

Связанные вопросы


Похожие вопросы

Имейте в виду, что загрузка страницы имеет более одного этапа. Btw, это чистый 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

+132
источник

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

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

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

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

or 

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

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

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

+116
источник

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

Пример:

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

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

defer

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

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

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

+56
источник

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

+25
источник

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

+20
источник

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

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

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>    
</html>
+7
источник
document.onreadystatechange = function(){
     if(document.readyState === 'complete'){
         /*code here*/
     }
}

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

+7
источник
<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
источник

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

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

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

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

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

+5
источник

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

+4
источник
<body onload="myFunction()">

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

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

+4
источник

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

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

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

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
+4
источник

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

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
источник

Существует очень хорошая документация о том, как определить, загружен ли документ, используя 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
источник

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

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

  // your javascript event

});
+3
источник
$(window).on("load", function(){ ... });

.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>
+2
источник

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

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

+1
источник

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

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
+1
источник

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

0
источник

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

// your javascript event here

});
</script>

0
источник

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

window.onload = function (){
    /* statements */
}();   
0
источник

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

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

-3
источник

Посмотрите другие вопросы по меткам или Задайте вопрос