Могу ли я показать знак загрузки во время перезагрузки страницы?

Question

У меня есть страница ASP.NET, на которой пользователи сохраняют данные. Когда они нажимают кнопку сохранения, данные сохраняются в vb и перезагрузка страницы для обновления текущих данных на странице с новыми данными, которые они только что сохранили. Некоторые из запросов db на этой странице требуют времени, и пользователи пытаются делать другие вещи на странице во время перезагрузки.

Могу ли я показать индикатор хода и центр так или иначе? Я смотрю вокруг и ничего не могу найти. Я тоже не делаю обратной передачи. Я перезагружаю страницу для выполнения запросов, выполняемых в pageload.

Я ищу решение javascript, jquery или vb.

Answer 1

Я бы предложил использовать jquery для асинхронной загрузки страницы и показать анимированный gif, чтобы показать, что он загружается. Как только страница загружается в jquery, вы можете удалить aniamted gif/обновить страницу.

$(document).ready(function() { 

**$('<img src="/Images/ajax-loader.gif"') 
.appendTo(#someID)** 

...<ajax call to load page>... 

**$('#someID').find('img').remove();**  


}); 

Answer 2

Люди обычно решить эту проблему путем размещения загрузки анимации вместо индикатора выполнения, так как для того, чтобы знать реальный прогресс страницы вы должны использовать неестественные сложные механизмы, которые в настоящее время Я не понимаю (или дон Даже не существует).

Вы можете запустить простое событие javascript в форме submit, которая добавляет класс в BODY и удаляет его после загрузки (если это запрос ajax, в противном случае он будет удален сам). Эти образцы события для не-Ajax форм:

Как это (чистый JavaScript):

document.forms[0].onsubmit = function(){ 
    document.body.className += ' t-loading'; 
} 

Или с JQuery:

$('FORM').submit(function(){ 
     $(document.body).addClass('t-loading'); 
}); 

Затем вы добавляете CSS, как это

BODY.t-loading { background:url(loading.gif) center center no-repeat; } 
BODY.t-loading * { visibility:hidden; } 

You can look for a free loading icon in google.