Я использую следующий код для выполнения некоторых инструкций после загрузки страницы.
<script type="text/javascript">
window.onload = function () {
newInvite();
document.ag.src="b.jpg";
}
</script>
Но этот код работает неправильно. Функция вызывается, даже если некоторые изображения или элементы загружаются. Я хочу вызвать функцию, полностью загруженную страницей.
это может сработать для вас:
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
или если ваш комфорт с jQuery,
$(document).ready(function(){
// your code
});
$(document).ready() запускается на DOMContentLoaded, но это событие не запускается последовательно среди браузеров. Вот почему jQuery, скорее всего, будет реализовывать некоторые сложные обходные пути для поддержки всех браузеров. И это очень затруднит "точно" имитировать поведение, используя простой Javascript (но не исключено, конечно).
как предложил Джеффри Суини и Дж. Торрес, я думаю, что лучше иметь функцию setTimeout, прежде чем запускать функцию, как показано ниже:
setTimeout(function(){
//your code here
}, 3000);
А) с помощью простого JavaScript:
document.addEventListener('readystatechange', event => {
if (event.target.readyState === "interactive") { //same as: ..addEventListener("DOMContentLoaded".. and jQuery.ready
alert("All HTML DOM elements are accessible");
}
if (event.target.readyState === "complete") {
alert("Now external resources are loaded too, like css,src etc... ");
}
});
B) с помощью jQuery ready:
$(function(){
alert("hello");
});
C) Не используйте нижеследующее (поскольку оно перезаписывает другие объявления того же типа):
document.onreadystatechange = function(){ alert("Hi"); }
Если вы можете использовать jQuery, посмотрите load. Затем вы можете настроить свою функцию после завершения загрузки элемента.
Например, рассмотрите страницу с простым изображением:
<img src="book.png" alt="Book" id="book" />
Обработчик события может быть привязан к изображению:
$('#book').load(function() {
// Handler for .load() called.
});
Если вам нужны все элементы в текущем окне для загрузки, вы можете использовать
$(window).load(function () {
// run code
});
Я немного путаю то, что вы подразумеваете при загрузке страницы, "DOM Load" или "Content Load", а? В html-странице загрузка может запускать событие после события типа 2.
Загрузка DOM: что обеспечивает полное начало загрузки всего дерева DOM. Но не обеспечивайте загрузку ссылочного контента. Предположим, вы добавили изображения тегами img, поэтому это событие гарантирует, что все img загружены, но изображения не загружены должным образом. Чтобы получить это событие, напишите следующим образом:
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
Или используя jQuery:
$(document).ready(function(){
// your code
});
После загрузки DOM и содержимого: что также указывает на загрузку DOM и Content. Он обеспечит не только тег img, он обеспечит загрузку всех изображений или другого относительного содержимого. Чтобы получить это событие, напишите следующим образом:
window.addEventListener('load', function() {...})
Или используя jQuery:
$(window).on('load', function() {
console.log('All assets are loaded')
})
Если вы хотите вызвать функцию js на странице html, используйте событие onload. Событие onload происходит, когда пользовательский агент заканчивает загрузку окна или всех кадров в FRAMESET. Этот атрибут может использоваться с элементами BODY и FRAMESET.
<body onload="callFunction();">
....
</body>
Таким образом, вы можете обрабатывать оба случая - если страница уже загружена или нет:
document.onreadystatechange = function(){
if (document.readyState === "complete") {
myFunction();
}
else {
window.onload = function () {
myFunction();
};
};
}
В качестве альтернативы вы можете попробовать ниже.
$(window).bind("load", function() {
// code here });
Это работает во всех случаях. Это сработает только тогда, когда вся страница загружена.
Если вы не используете какие-либо JS-фреймворки, этот проект - лучший способ получить состояние готовности к работе, с кросс-совместимостью браузера.
Если вы уже используете jQuery, вы можете попробовать следующее:
$(window).bind("load", function() {
// code here
});
window.onload = () => {
// run in onload
setTimeout(() => {
// onload finished.
// and execute some code here like stat performance.
}, 10)
}
Я могу вам сказать, что лучший ответ, который я нашел, - это поставить скрипт "driver" сразу после команды </body>. Это самый простой и, возможно, более универсальный, чем некоторые из решений, описанных выше.
План: На моей странице есть таблица. Я записываю страницу с таблицей в браузер, затем сортирую ее с помощью JS. Пользователь может прибегнуть к нему, щелкнув заголовки столбцов.
После завершения таблицы командой </tbody> и завершения тела, я использую следующую строку, чтобы вызвать сортировочный JS для сортировки таблицы по столбцу 3. Я получил сценарий сортировки из Интернета, чтобы он не воспроизводился Вот. По крайней мере, в следующем году вы можете увидеть это в действии, включая JS, по адресу static29.ILikeTheInternet.com. Нажмите "здесь" внизу страницы. Это откроет еще одну страницу с таблицей и сценариями. Вы можете увидеть, как он складывает данные, а затем быстро сортирует их. Мне нужно немного ускорить его, но основы уже есть.
</tbody></body><script type='text/javascript'>sortNum(3);</script></html>
MakerMikey
Попробуйте jQuery:
$(function() {
// Handler for .ready() called.
});
вызов функции после завершения заданного времени загрузки страницы
setTimeout(function() {
var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
for(var i, j = 0; i = ddl2.options[j]; j++) {
if(i.text == val) {
ddl2.selectedIndex = i.index;
break;
}
}
}, 1000);Я использую веб-компоненты, чтобы это работало для меня:
document.addEventListener('WebComponentsReady', function() {
document.querySelector('your-element').show();
});
Поместите свой script после завершения тега body... он работает...