Я выполняю внешний script, используя <script> внутри <head>.
Теперь, когда script выполняет до, страница загрузилась, я не могу получить доступ к <body>, между прочим. Я хотел бы выполнить некоторый JavaScript после того, как документ был "загружен" (HTML полностью загружен и в ОЗУ). Есть ли какие-либо события, на которые я могу подключиться, когда выполняется мой script, который будет запущен при загрузке страницы?
Эти решения будут работать:
<body onload="script();">
или
document.onload = function ...
или даже
window.onload = function ...
Обратите внимание, что последний вариант - лучший способ пойти, поскольку unobstrusive и считается более стандартным.
Разумно переносимый, не рамочный способ использования 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;
}
}
Это событие запускается, когда исходный 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:
Вы можете поместить атрибут "onload" внутри тела
...<body onload="myFunction()">...
Или, если вы используете jQuery, вы можете сделать
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
Надеюсь, он ответит на ваш вопрос.
Обратите внимание, что $(window).load будет выполняться после того, как документ будет отображаться на вашей странице.
Если сценарии загружены в <head> документа, то можно использовать атрибут defer в теге сценария.
Пример:
<script src="demo_defer.js" defer></script>
От https://developer.mozilla.org:
defer
Этот логический атрибут установлен для указания браузеру, что скрипт предполагается выполнить после разбора документа, но до стрельба DOMContentLoaded.
Этот атрибут не должен использоваться, если src атрибут отсутствует (то есть для встроенных скриптов), в этом случае он будет не имеют никакого эффекта.
Для достижения аналогичного эффекта для динамически вставленных скриптов используйте вместо async = false. Скрипты с атрибутом defer будут выполняться в порядок, в котором они появляются в документе.
Здесь скрипт, основанный на отложенной загрузке 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
Посмотрите на подключение document.onload или в jQuery $(document).load(...).
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}
посмотри здесь: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
<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
Если вы используете jQuery,
$(function() {...});
эквивалентно
$(document).ready(function () { })
Смотрите Какое событие запускается функция JQuery $function()?
Просто определите <body onload="aFunction()">, который будет вызываться после загрузки страницы. Ваш код в script заключен в aFunction() { }.
<body onload="myFunction()">
Этот код работает хорошо.
Но метод window.onload имеет различные зависимости. Так что это может не работать все время.
Я иногда нахожусь на более сложных страницах, которые не все элементы загружали по времени window.onload. Если это так, добавьте setTimeout до того, как ваша функция задержит момент. Это не изящно, но это простой хак, который хорошо выглядит.
window.onload = function(){ doSomethingCool(); };
становится...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
Использование Библиотека 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>
Существует очень хорошая документация о том, как определить, загружен ли документ, используя Javascript или JQuery.
Используя собственный Javascript, это может быть достигнуто
if (document.readyState === "complete") {
init();
}
Это также можно сделать внутри интервала
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
init();
}
}, 100);
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" );
});
Используйте этот код с библиотекой jQuery, это будет отлично работать.
$(window).bind("load", function() {
// your javascript event
});
$(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>
Как говорит Дэниел, вы можете использовать document.onload.
Различные javascript-структуры hwoever (jQuery, Mootools и т.д.) используют пользовательское событие "domready", которое, я думаю, должно быть более эффективным. Если вы разрабатываете javascript, я настоятельно рекомендую использовать фреймворк, они значительно повысят производительность.
Мой совет использовать атрибут asnyc для тега script, который поможет вам загрузить внешние скрипты после загрузки страницы
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
jQuery обертки, которые для вас. Вероятно, вы найдете это самым простым решением.
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>использовать функцию самостоятельного выполнения onload
window.onload = function (){
/* statements */
}();
//Он тестировался и работал:)
$(document).ready(function() { functon1(); function2() });