Мені потрібно виконати деякий код JavaScript, коли сторінка повністю завантажена. Сюди входять такі речі, як зображення.
Я знаю, ви можете перевірити, чи DOM готовий, але я не знаю, чи це те саме, що коли сторінка повністю завантажена.
Відповіді:
Так називається load. Він прийшов Waaaaay до того, як DOM готовий був навколо, і DOM Ready був фактично створений з точної причини, яка loadчекала на зображення.
window.addEventListener('load', function () {
alert("It's loaded!")
})window.onloadвикликається, коли кожен компонент сторінки / ресурс (тобто * включаючи * зображення). Маю рацію?
onloadчекає всіх ресурсів, що входять до документа. Це, звичайно, виключає запити, створені динамічно, які не є частиною самого документа, наприклад, запит AJAX.
addEventListener("load", function(){… })замість того, щоб перезаписати onloadмайно.
Зазвичай ви можете користуватися window.onload, але ви можете помітити, що останні веб-переглядачі не спрацьовують, window.onloadколи ви використовуєте кнопки історії назад / вперед.
Деякі люди пропонують дивні викривлення для вирішення цієї проблеми, але насправді, якщо ви просто зробите window.onunloadобробник (навіть той, який нічого не робить), ця кешування буде відключена у всіх браузерах. MDC документи цієї «особливість» дуже добре, але з якоїсь - то причини все ще є люди , які використовують setIntervalі інше дивне хакі.
Деякі версії Opera мають помилку, яку можна вирішити, додавши наступне десь на вашу сторінку:
<script>history.navigationMode = 'compatible';</script>Якщо ви просто намагаєтесь отримати функцію javascript, яку називають один раз за перегляд (і не обов'язково після закінчення завантаження DOM), ви можете зробити щось подібне:
<img src="javascript:location.href='javascript:yourFunction();';">Наприклад, я використовую цей трюк для завантаження дуже великого файлу в кеш на завантажувальному екрані:
<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">Для повноти ви можете також прив’язати його до DOMContentLoaded, який зараз широко підтримується
document.addEventListener("DOMContentLoaded", function(event){
// your code here
});Більше інформації: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
$.readyя посилався, я вважав, що це зробив хороший внесок. Btw. Я б використовував addEventListener-метод також для loadподії, оскільки він дозволяє мати декілька зворотних зворотних window.addEventListener("load", function(event){ // your code here });
Спробуйте це лише запустити після завантаження цілої сторінки
За допомогою JavaScript
window.onload = function(){
// code goes here
};За Jquery
$(window).bind("load", function() {
// code goes here
});$(window)змушує мене думати, що це буде jquery - правда? Або я заплутав синтаксис javascript? (Я новачок у JS).
$(document).ready();коли jQuery доступний?
Спробуйте цей код
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
}
}відвідайте https://developer.mozilla.org/en-US/docs/DOM/document.readyState для отримання більш детальної інформації
"interactive"не завантажений повністю. "complete"повністю завантажений
Javascript, що використовує onLoad()подію, буде чекати завантаження сторінки перед виконанням.
<body onload="somecode();" >Якщо ви використовуєте функцію готовості документа jQuery Framework, код завантажується, як тільки DOM буде завантажений і перед завантаженням вмісту сторінки:
$(document).ready(function() {
// jQuery code goes here
});Ви можете скористатися window.onload , оскільки документи вказують, що він не запускається, поки не буде готовий домен і не буде завантажено ВСІ інші активи на сторінці (зображення тощо).
І ось як це зробити з PrototypeJS :
Event.observe(window, 'load', function(event) {
// Do stuff
});У сучасних браузерах із сучасним JavaScript (> = 2015) ви можете додати type="module"тег сценарію, і все, що знаходиться всередині цього сценарію, буде виконано після завантаження цілої сторінки. наприклад:
<script type="module">
alert("runs after") // Whole page loads before this line execute
</script>
<script>
alert("runs before")
</script>також старі браузери зрозуміють nomoduleатрибут. Щось на зразок цього:
<script nomodule>
alert("tuns after")
</script>Для отримання додаткової інформації ви можете відвідати javascript.info .
onloadвикористовувати $(window).loadзамість (Jquery):$(window).load(function() {
//code
});OnLoad властивість Mixin GlobalEventHandlers є обробником події для події навантаження в вікні, XMLHttpRequest, елемент і т.д., який спрацьовує , коли ресурс завантажений.
Таким чином, у JavaScript вже є метод завантаження у вікні, який виконується, яку сторінку завантажують повністю, включаючи зображення ...
Ви можете щось зробити:
var spinner = true;
window.onload = function() {
//whatever you like to do now, for example hide the spinner in this case
spinner = false;
};Оновлення 2019 року: це відповідь, яка працювала на мене. Оскільки мені знадобилося кілька запитів ajax, щоб спочатку повернути та повернути дані для підрахунку елементів списку.
$(document).ajaxComplete(function(){
alert("Everything is ready now!");
});