Определить, закончилась ли загрузка страницы
257678 просмотра
10 ответа
Есть ли способ определить, когда страница закончила загрузку, т.е. весь ее контент, javascript и ресурсы, такие как css и изображения?
так как:
if(PAGE HAS FINISHED LOADING)
{
// do something amazing
}
а также дополнительно, если страница загружалась более 1 минуты, сделайте что-нибудь еще, например:
if(PAGE HAS BEEN LOADING FOR 1 MIN)
{
// do something else amazing
}
Я видел такие сайты, как Apple MobileMe, делающие подобные проверки, но не смог понять это в своих огромных библиотеках кода.
Кто-нибудь может помочь?
Спасибо
РЕДАКТИРОВАТЬ: Это по сути то, что я хочу сделать:
// hide content
$("#hide").hide();
// hide loading
$("#loading").hide();
// fade in loading animation
setTimeout($('#loading').fadeIn(), 200);
jQuery(window).load(function() {
$("#hide").fadeIn();
$("#loading").fadeOut(function() {
$(this).remove();
clearInterval(loadingAnim);
});
setTimeout(function() {
$("#error").fadeIn();
}, 60000);
});
Автор: Cameron
Источник
Размещён: 12.11.2019 09:05
Ответы (10)
116 плюса
jQuery(window).load(function () {
alert('page is loaded');
setTimeout(function () {
alert('page is loaded and 1 minute has passed');
}, 60000);
});
Или http://jsfiddle.net/tangibleJ/fLLrs/1/
Смотрите также http://api.jquery.com/load-event/ для объяснения jQuery (окна) .load.
Обновить
Подробное объяснение того, как происходит загрузка javascript и два события DOMContentLoaded и OnLoad, можно найти на этой странице .
DOMContentLoaded : когда DOM готов к манипулированию. Способ захвата этого события с помощью jQuery jQuery(document).ready(function () {});
.
OnLoad : когда DOM готов и все ресурсы - включая изображения, iframe, шрифты и т. Д. - загружены и класс вращающегося колеса / часа исчезает. Способ захвата этого события в jQuery - вышеупомянутый jQuery(window).load
.
56 плюса
Есть два способа сделать это в JQuery в зависимости от того, что вы ищете ..
используя JQuery вы можете сделать
// это будет ждать загрузки текстовых ресурсов перед вызовом this (dom .. css .. js)
$(document).ready(function(){...});
// это будет ждать окончания загрузки всех изображений и текстовых ресурсов перед выполнением
$(window).load(function(){...});
12 плюса
Это называется нагрузкой. DOM ready был фактически создан по той причине, что onload ждала изображения. (Ответ, взятый у Матчу на схожий вопрос некоторое время назад.)
window.onload = function () { alert("It's loaded!") }
onload ожидает все ресурсы, которые являются частью документа.
Ссылка на вопрос, где он все это объяснил:
Нажмите меня, вы знаете, что хотите!
Автор: Nemanja Размещён: 16.08.2011 07:2211 плюса
Я думаю, что самый простой способ был бы
var items = $('img, style, ...'), itemslen = items.length;
items.bind('load', function(){
itemslen--;
if (!itemlen) // Do stuff here
});
РЕДАКТИРОВАТЬ, чтобы быть немного сумасшедшим:
var items = $('a, abbr, acronym, address, applet, area, audio, b, base, ' +
'basefont, bdo, bgsound, big, body, blockquote, br, button, canvas, ' +
'caption, center, cite, code, col, colgroup, comment, custom, dd, del, ' +
'dfn, dir, div, dl, document, dt, em, embed, fieldset, font, form, frame, ' +
'frameset, head, hn, hr, html, i, iframe, img, input, ins, isindex, kbd, ' +
'label, legend, li, link, listing, map, marquee, media, menu, meta, ' +
'nextid, nobr, noframes, noscript, object, ol, optgroup, option, p, ' +
'param, plaintext, pre, q, rt, ruby, s, samp, script, select, small, ' +
'source, span, strike, strong, style, sub, sup, table, tbody, td, ' +
'textarea, tfoot, th, thead, title, tr, tt, u, ul, var, wbr, video, ' +
'window, xmp'), itemslen = items.length;
items.bind('load', function(){
itemslen--;
if (!itemlen) // Do stuff here
});
Автор: qwertymk
Размещён: 16.08.2011 07:21
7 плюса
Другой вариант, вы можете проверить документ. ReadyState, как,
var chkReadyState = setInterval(function() {
if (document.readyState == "complete") {
// clear the interval
clearInterval(chkReadyState);
// finally your page is loaded.
}
}, 100);
Из документации ReadyState Page сводка полного состояния
Автор: Rohan Kumar Размещён: 24.04.2015 05:44Возвращает «загрузку» во время загрузки документа, «интерактивную» после завершения анализа, но по-прежнему загружая подресурсы, и «завершенную» после загрузки.
2 плюса
Один из вариантов - сделать страницу пустой, содержащей небольшое количество javascript. Используйте сценарий для вызова AJAX, чтобы получить фактическое содержимое страницы, и используйте функцию успеха, чтобы записать результат поверх текущего документа. В функции тайм-аута вы можете «сделать что-то еще удивительное»
Примерный псевдокод:
$(document).ready(function(){
$.ajax
url of actual page
success:do something amazing
timeout: do something else
});
Автор: yoozer8
Размещён: 16.08.2011 07:16
2 плюса
Это то, что вы имели в виду?
$("document").ready( function() {
// do your stuff
}
Автор: John Smith
Размещён: 16.08.2011 07:17
2 плюса
var pageLoaded=0;
$(document).ready(function(){
pageLoaded=1;
});
Использование jquery: https://learn.jquery.com/using-jquery-core/document-ready/
Автор: Danial Размещён: 03.06.2016 12:572 плюса
Без jquery или чего-то в этом роде, почему бы и нет?
var loaded=0;
var loaded1min=0;
document.addEventListener("DOMContentLoaded", function(event) {
loaded=1;
setTimeout(function () {
loaded1min=1;
}, 60000);
});
Автор: Cth103
Размещён: 22.06.2016 10:28
1 плюс
К сведению людей, которые спрашивали в комментариях, это то, что я на самом деле использовал в проектах:
function onLoad(loading, loaded) {
if(document.readyState === 'complete'){
return loaded();
}
loading();
if (window.addEventListener) {
window.addEventListener('load', loaded, false);
}
else if (window.attachEvent) {
window.attachEvent('onload', loaded);
}
};
onLoad(function(){
console.log('I am waiting for the page to be loaded');
},
function(){
console.log('The page is loaded');
});
Автор: Cameron
Размещён: 10.07.2017 09:31
Вопросы из категории :
- jquery Прокрутка переполненных DIV с помощью JavaScript
- jquery Экранирование строк HTML с помощью jQuery
- jquery Как сравнить HTML-сущность с JQuery
- jquery Есть ли функция "существует" для jQuery?
- jquery Как удалить все параметры в окне выбора, а затем добавить один вариант и выбрать его с помощью jQuery?
- jquery Получение идентификатора элемента, который вызвал событие
- jquery Как получить результат из модального диалога в JQuery
- jquery Удалите все классы, начинающиеся с определенной строки.
- jquery Как мне остановить эффект в jQuery
- jquery Как показать загрузочный счетчик в jQuery?
- jquery Есть ли лучший способ создать объектно-ориентированный класс с помощью jQuery?
- jquery JQuery / JavaScript, чтобы заменить сломанные изображения
- jquery Выделите слово с помощью jQuery
- jquery JQuery получить текстовый текст
- jquery Регулярное выражение для соответствия неанглийским символам?
- jquery How do I detect a click outside an element?
- jquery jQuery Datepicker с вводом текста, который не позволяет вводить пользователем
- jquery Как я могу загружать файлы асинхронно?
- jquery Получить поля ввода формы с помощью jQuery?
- jquery Каков наилучший способ добавить параметры для выбора в качестве объекта JS с помощью jQuery?