Я выполняю внешний сценарий, используя <script> внутри <head>.
Теперь, поскольку сценарий выполняется до загрузки страницы, я не могу получить доступ, помимо прочего, к <body>. Я хотел бы выполнить некоторый JavaScript после того, как документ был «загружен» (HTML полностью загружен и находится в ОЗУ). Могу ли я подключиться к каким-либо событиям при выполнении сценария, которые будут запускаться при загрузке страницы?
Эти решения будут работать:
<body onload="script();">
or
document.onload = function ...
или даже
window.onload = function ...
Обратите внимание, что последний вариант - лучший вариант, поскольку он ненавязчивый и считается более стандартным.
document.onload= не навязчивый en.wikipedia.org/wiki/Unobtrusive_JavaScript
- person marcgg; 05.09.2011
window.onload = function работал в моем случае. Я видел людей, отвечающих $(document).ready(function() на тот же вопрос на некоторых других форумах, но у меня это не работает!
- person sohaiby; 02.07.2015
jQuery для загрузки документа для полноты?
- person IAbstract; 10.10.2016
document.onload не работает в Google Chrome при использовании в отдельном index.js файле сценария. window.onload работает. (Chrome 71.0.3578.98 (официальная сборка) (64-разрядная версия))
- person The Red Pea; 21.01.2019
defer в ссылке javascript в заголовке. 2) переместите любой javascript, который обращается к DOM, в конец страницы, непосредственно перед </body>.
- person ToolmakerSteve; 01.05.2019
Это событие запускается, когда исходный HTML-документ был полностью загружен и проанализирован, не дожидаясь завершения загрузки таблиц стилей, изображений и субфреймов. На этом этапе вы можете программно оптимизировать загрузку изображений и CSS в зависимости от пользовательского устройства или скорости полосы пропускания.
Выполняется после загрузки 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/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load
Список всех событий MDN:
https://developer.mozilla.org/en-US/docs/Web/Events
window.onload = ..., думая, что мой сценарий будет ждать, пока все будет полностью загружено, перед запуском, но кажется, что window.onload на самом деле ведет себя как document.addEventListener("DOMContentLoaded", ..., тогда как window.addEventListener("load", ... действительно ждет, пока все будет полностью загружено. Я бы подумал, что window.onload должно быть эквивалентно window.addEventListener("load", ..., а не document.addEventListener("DOMContentLoaded", ... ?? У меня такой же результат получился в Chrome и FF.
- person wkille; 24.01.2020
Достаточно переносимый, не связанный с фреймворком способ настроить сценарий для запуска функции во время загрузки:
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;
}
}
Вы можете поместить атрибут "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/en-US/docs/Web/HTML/Element/script:
отложить
Этот логический атрибут установлен, чтобы указать браузеру, что сценарий предназначен для выполнения после анализа документа, но перед запуском 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
Я написал это на основе концепции Google отложенной загрузки javascript Pagespeed, а также из этой статьи Отложить загрузку javascript
Посмотрите перехват document.onload или в jQuery $(document).load(...).
document.addEventListener('readystatechange', event => {
// When HTML/DOM elements are ready:
if (event.target.readyState === "interactive") { //does same as: ..addEventListener("DOMContentLoaded"..
alert("hi 1");
}
// When window loaded ( external resources are loaded too- `css`,`src`, etc...)
if (event.target.readyState === "complete") {
alert("hi 2");
}
});
$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});
ПРИМЕЧАНИЕ. - Не используйте приведенную ниже разметку (поскольку она перезаписывает другие объявления того же типа):
document.onreadystatechange = ...
Рабочий скрипт на <body onload="myFunction()">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction(){
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
<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 () { })
или другая короткая рука:
$().ready(function () { })
См. Какое событие запускает JQuery $ function ()? и https://api.jquery.com/ready/
Иногда на более сложных страницах я обнаруживаю, что не все элементы загружаются к моменту запуска window.onload. В этом случае добавьте setTimeout до того, как ваша функция для задержки станет моментом. Это не элегантно, но это простой прием, который хорошо отображается.
window.onload = function(){ doSomethingCool(); };
становится ...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}
посмотрите здесь: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
Просто определите <body onload="aFunction()">, который будет вызываться после загрузки страницы. Ваш код в сценарии заключен в aFunction() { }.
<body onload="myFunction()">
Этот код работает хорошо.
Но window.onload метод имеет разные зависимости. Так что это может не работать все время.
В приведенном ниже фрагменте я собираю выбранные методы и показываю их последовательность. Замечания
document.onload (X) не поддерживается ни одним современным браузером (событие никогда не запускается)<body onload="bodyOnLoad()"> (F) и одновременно window.onload (E), то будет выполнен только первый (потому что он перекрывает второй)<body onload="..."> (F), заключен в дополнительную функцию onloaddocument.onreadystatechange (D) не переопределять document .addEventListener('readystatechange'...) (C) вероятно, методы cecasue onXYZevent-like независимы, чем addEventListener очереди (что позволяет добавлять несколько слушателей). Вероятно, между выполнением этих двух обработчиков ничего не происходит.div, записывают свои временные метки также в теле (щелкните ссылку «Полная страница» после выполнения сценария, чтобы увидеть ее).readystatechange (C,D) are executed multiple times by browser but for different document states:
DOMContentLoadedbody/window onload<html>
<head>
<script>
// solution A
console.log(`[timestamp: ${Date.now()}] A: Head script`);
// solution B
document.addEventListener("DOMContentLoaded", () => {
print(`[timestamp: ${Date.now()}] B: DOMContentLoaded`);
});
// solution C
document.addEventListener('readystatechange', () => {
print(`[timestamp: ${Date.now()}] C: ReadyState: ${document.readyState}`);
});
// solution D
document.onreadystatechange = s=> {print(`[timestamp: ${Date.now()}] D: document.onreadystatechange ReadyState: ${document.readyState}`)};
// solution E (never executed)
window.onload = () => {
print(`E: <body onload="..."> override this handler`);
};
// solution F
function bodyOnLoad() {
print(`[timestamp: ${Date.now()}] F: <body onload='...'>`);
infoAboutOnLoad(); // additional info
}
// solution X
document.onload = () => {print(`document.onload is never fired`)};
// HELPERS
function print(txt) {
console.log(txt);
if(mydiv) mydiv.innerHTML += txt.replace('<','<').replace('>','>') + '<br>';
}
function infoAboutOnLoad() {
console.log("window.onload (after override):", (''+document.body.onload).replace(/\s+/g,' '));
console.log(`body.onload==window.onload --> ${document.body.onload==window.onload}`);
}
console.log("window.onload (before override):", (''+document.body.onload).replace(/\s+/g,' '));
</script>
</head>
<body onload="bodyOnLoad()">
<div id="mydiv"></div>
<!-- this script must te at the bottom of <body> -->
<script>
// solution G
print(`[timestamp: ${Date.now()}] G: <body> bottom script`);
</script>
</body>
</html>Есть очень хорошая документация по определить, загружен ли документ с помощью 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>
Используя библиотеку 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>
Как говорит Дэниел, вы можете использовать document.onload.
Однако различные фреймворки javascript (jQuery, Mootools и т. Д.) Используют настраиваемое событие domready, которое, я думаю, должно быть более эффективным. Если вы разрабатываете с помощью javascript, я настоятельно рекомендую использовать фреймворк, они значительно увеличивают вашу продуктивность.
Я советую использовать атрибут asnyc для тега скрипта, который поможет вам загружать внешние скрипты после загрузки страницы.
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
defer, как упоминал @Daniel Price?
- person jk7; 15.04.2015
Вы можете написать функцию в конкретном файле сценария и вызвать ее в свой элемент тела с помощью атрибута onload.
Пример:
<script>
afterPageLoad() {
//your code here
}
</script>
Теперь вызовите свой скрипт на свою html-страницу, используя тег скрипта:
<script src="afterload.js"></script>
в элемент вашего тела; добавьте атрибут onload следующим образом:
<body onload="afterPageLoad();">
я могу поймать загрузку страницы по этому коду
<script>
console.log("logger saber");
window.onload = (event) => {
console.log('page is fully loaded');
document.getElementById("tafahomNameId_78ec7c44-beab-40de-9326-095f474519f4_$LookupField").value = 1;;
};
</script>
