Мне нужно выполнить код JavaScript, когда страница полностью загружена. Это включает в себя такие вещи, как изображения.
Я знаю, что вы можете проверить, готов ли DOM, но я не знаю, совпадает ли это с тем, когда страница полностью загружена.
Ответы:
Это называется load. Это произошло до того, как появился DOM ready, и 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-method для 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, код будет загружен сразу после загрузки DOM и до загрузки содержимого страницы:
$(document).ready(function() {
// jQuery code goes here
});Возможно, вы захотите использовать window.onload , так как в документах указано, что он не запускается до тех пор, пока DOM не будет готов и ВСЕ другие ресурсы на странице (изображения и т. Д.) Не загружены.
И вот способ сделать это с 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 миксина GlobalEventHandlers является обработчиком событий для события загрузки Window, XMLHttpRequest, элемента и т. Д., Которое срабатывает при загрузке ресурса.
Таким образом, в основном javascript уже имеет метод onload для окна, которое выполняется, какая страница полностью загружена, включая изображения ...
Вы можете сделать что-то:
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!");
});