Пожалуйста, посмотрите мой похожий вопрос Сообщение «Пожалуйста, подождите» с использованием jQuery или AJAX? :
Пока загружается страница ASPX, вы останетесь на текущей странице в веб-браузере.Поэтому, когда вы знаете, что новая страница загружается (т.е. когда нажата кнопка или ссылка), просто покажите изображение «Загрузка», и оно автоматически исчезнет, когда клиент закончит получать «новую» страницу (будь то фактическаяновая страница или та же страница, отправленная назад).
Пример кода, который вы можете использовать для автоматического отображения загружаемого изображения (содержится в div) при нажатии кнопки отправки, выглядит следующим образом:
$(':submit').click(function() {
$('#divLoading').show();
});
В качестве альтернативы вы можете использовать UpdatePanel, который поставляется в Ajax Toolkit или в ASP.NET 4.0.У него есть элемент управления UpdateProgress, который автоматически отображает загружаемое изображение.
РЕДАКТИРОВАТЬ:
Я думаю, что вы хотите показать изображение "Загрузка" перед вашимдаже первая страница загружена, и в этом случае вы должны поместить содержимое вашей главной страницы в UpdatePanel, использовать элемент управления загрузчиком прогресса, который автоматически показывает изображение (оба доступны в Ajax Toolkit или ASP.NET 4.0), и загрузитьсущественное (не главная страница) содержание вашей страницы после вашей начальной загрузки страницы в UpdatePanel.
Вы можете сделать это, поместив тело вашей страницы содержимого в Panel, установите видимость панели на False, а затем установите ее на True после загрузки страницы.
Разметка для элемента управления UpdateProgress выглядит следующим образом.Вы, конечно, захотите стилизовать его и расположить в нужной области.
<asp:UpdateProgress ID="upgLoad" DynamicLayout="true" runat="server">
<ProgressTemplate>
<div id="theprogress">
<img src="images/loading.gif" />
<span>Loading</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
РЕДАКТИРОВАТЬ:
Если вы не хотите использоватьUpdatePanel и UpdateProgress, затем просто сделайте следующее:
- Поместите содержимое страницы в
Panel с именем pnlContent и установите видимость панели на False. - Создайте
img и ваше загрузочное изображение и поместите его в отдельное Panel с именем pnlLoading с установленным значением видимости True. Поместите клиентский скрипт, которыйзаставляет страницу перезагрузиться, как только она загрузится.Поместите этот скрипт внутрь pnlLoading. Обновление : поместите код # 3 ниже на своей странице ASPX, чтобы создать панель, и она немедленно вызовет публикацию.
Добавьте следующий код # 4 вВаш Page_Load.
Код:
Для # 3:
<asp:Panel runat="server" ID="pnlLoading">
<!-- Replace "form1" with your form's name. -->
<script type="text/javascript">form1.submit()</script>
<img src="images/loading.gif" alt="Loading" />
<span>Loading</span>
</asp:Panel>
Для # 4:
if (Page.IsPostBack())
{
pnlLoading.Visible = false;
pnlContent.Visible = true;
}
Это приведет к отображению загружаемого изображения во время загрузки вашего фактического содержимого страницы.