Я выполняю внешний скрипт, используя <script>внутренний <head>.
Теперь, когда скрипт выполняется до загрузки страницы, я не могу получить доступ <body>, среди прочего. Я хочу выполнить JavaScript после того, как документ был «загружен» (HTML полностью загружен и находится в оперативной памяти). Есть ли какие-либо события, которые я могу подключить при выполнении моего скрипта, которые сработают при загрузке страницы?
Ответы:
Эти решения будут работать:
<body onload="script();">или
document.onload = function ...или даже
window.onload = function ...Обратите внимание, что последний вариант - лучший способ, так как он ненавязчив и считается более стандартным .
document.onload=не навязчиво en.wikipedia.org/wiki/Unobtrusive_JavaScript
Разумно переносимый, неструктурированный способ заставить ваш скрипт установить функцию для запуска во время загрузки:
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 на основе пользовательского устройства или скорости полосы пропускания.
Выполняется после загрузки 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 список всех событий:
window.onload = ...подумать, что мой сценарий будет ждать, пока все не будет полностью загружено, прежде чем запускаться, но, похоже, он window.onloadдействительно ведет себя как document.addEventListener("DOMContentLoaded", ..., тогда как на window.addEventListener("load", ...самом деле все ждет полной загрузки. Я бы подумал, что window.onloadдолжно быть эквивалентно, window.addEventListener("load", ...а не document.addEventListener("DOMContentLoaded", ...?? Я получил тот же результат в Chrome и FF.
Вы можете поместить атрибут "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 :
Перенести
Этот логический атрибут установлен для указания браузеру, что сценарий должен быть выполнен после анализа документа, но до запуска 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
Я написал это на основе отложенной загрузки концепции gavascript pagespeed google, а также из этой статьи Отложить загрузку javascript
Посмотрите на перехват document.onloadили в jQuery $(document).load(...).
Рабочая Fiddle на<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/
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}посмотрите здесь: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
Иногда на более сложных страницах я обнаруживаю, что не все элементы загружены к временному окну. Запущена загрузка. Если это так, добавьте setTimeout до того, как ваша функция задержится на мгновение. Это не элегантно, но это простой взлом, который хорошо рендерится.
window.onload = function(){ doSomethingCool(); };становится ...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };Просто определите, <body onload="aFunction()">что будет вызвано после загрузки страницы. Ваш код в скрипте , чем приложен aFunction() { }.
<body onload="myFunction()">Этот код работает хорошо.
Но window.onloadметод имеет различные зависимости. Так что это может не работать все время.
Использование библиотеки YUI (мне это нравится):
YAHOO.util.Event.onDOMReady(function(){
//your code
});Портативный и красивый! Однако, если вы не используете YUI для других вещей (см. Документацию), я бы сказал, что его не стоит использовать.
NB: чтобы использовать этот код, вам нужно импортировать 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.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 = ...Как говорит Даниэль, вы можете использовать document.onload.
Различные фреймворки javascript, однако (jQuery, Mootools и т. Д.) Используют пользовательское событие 'domready', которое, я думаю, должно быть более эффективным. Если вы разрабатываете с использованием javascript, я настоятельно рекомендую использовать фреймворк, он значительно увеличит вашу производительность.
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>Мой совет использовать asnycатрибут для тега script, который поможет вам загрузить внешние скрипты после загрузки страницы
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>использовать функцию самостоятельного выполнения onload
window.onload = function (){
/* statements */
}(); onloadобработчики, используя этот подход. Вместо этого вы должны добавить слушателя.