Задача
Показать изображение в формате gif при обновлении данных на странице ASP (например - postback или загрузка и обработка файлов)
https://www.aspsnippets.com/Articles/Display-loading-image-while-PostBack-calls-in-ASPNet.aspx
Файлы
loader.js
function ShowProgress() { setTimeout(function () { var modal = $('<div />'); modal.addClass("modal"); $('body').append(modal); var loading = $(".loading"); loading.show(); var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0); var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0); //loading.css({ top: top, left: left }); loading.css({ top: 500, left: left }); }, 200); } $('form').live("submit", function () { ShowProgress(); });
style.css
.modal { position: fixed; top: 0; left: 0; background-color: black; z-index: 99; opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; min-height: 100%; width: 100%; } .loading { font-family: Arial; font-size: 10pt; border: 5px solid #67CFF5; width: 200px; height: 100px; display: none; position: fixed; background-color: White; z-index: 999; }
Код
В сам код на странице добавляем:
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="loader.js"></script>
jquery.min.js можно сохранить в локальный файл и поменять src.
<body>
<div class="loading" align="center"> Uploading Files. Please wait...<br /> <br /> <img src="images/loader.gif" alt="" /> </div>
Для Postback
Для того, чтобы показывать gif на постбеках нужно добавить к контролам, вызывающим постбек onchange=“ShowProgress() :
<asp:DropDownList ID="Year_DropDownList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Refresh_BillingTable" onchange="ShowProgress()"></asp:DropDownList>
Если используются динамические контролы, то нужно добавить аттрибут onchange:
DropDownList Month_DropDownList = new DropDownList(); Month_DropDownList.ID = "Month_DropDownList"; Month_DropDownList.Attributes.Add("onchange", "ShowProgress()");
Discussion