Отображать gif, пока загружается страница asp.net

Ответ 1

Для этого можно использовать элемент управления UpdateProgress, например:

<asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
    <ProgressTemplate>
        <div id="overlay">
            <div id="modalprogress">
                <div id="theprogress">
                    <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="/images/wait.gif" />
                    Please wait...
                </div>
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>  

Вот некоторые стили, которые вы можете использовать, если хотите, чтобы они были полупрозрачными:

#overlay {
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    background-color: #f8f8f8;
    width: 100%;
    height: 100%;
    filter: Alpha(Opacity=90);
    opacity: 0.9;
    -moz-opacity: 0.9;
}            
#theprogress {
    background-color: #fff;
    border:1px solid #ccc;
    padding:10px;
    width: 300px;
    height: 30px;
    line-height:30px;
    text-align: center;
    filter: Alpha(Opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
#modalprogress {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: -11px 0 0 -150px;
    color: #990000;
    font-weight:bold;
    font-size:14px;
}

Ответ 2

Пожалуйста, смотрите мой знакомый вопрос "Пожалуйста, подождите" сообщение с помощью jQuery или AJAX?:

Пока загружается страница ASPX, вы остаетесь на текущей странице в веб-браузере. Поэтому, когда вы знаете, что загружается новая страница (т.е. Когда нажата кнопка или ссылка), просто покажите изображение "Загрузка", и оно автоматически исчезнет, ​​когда клиент закончит получать "новую" страницу (будь то фактическая новая страница или та же страница, опубликованная назад).

Пример кода, который вы можете использовать для автоматического отображения вашего загрузочного изображения (содержащегося в div) при нажатии кнопки отправки, выглядит следующим образом:

$(':submit').click(function() {
    $('#divLoading').show();
});

В качестве альтернативы вы можете использовать UpdatePanel, который входит в Ajax Toolkit или в ASP.NET 4.0. Он имеет элемент управления UpdateProgress, который автоматически отображает загружаемое изображение.

EDIT:

Я думаю, вы хотите показать изображение "Загрузка" до того, как ваша первая страница будет загружена, и в этом случае вы должны разместить содержимое главной страницы, обернутое вокруг 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>

EDIT:

Если вы не хотите использовать элементы управления UpdatePanel и UpdateProgress, просто выполните следующие действия:

• Поместите содержимое своей страницы в Panel под названием pnlContent и установите видимость панели на False.
• Создайте img и загружаемое изображение и поместите его в отдельный Panel с именем pnlLoading с видимостью, установленной на True.

• Поместите клиентскую сторону script, которая заставляет перезагружать страницу, как только она загрузится. Поместите этот script внутрь pnlLoading. Обновить. Поместите код №3 ниже на странице ASPX, чтобы создать панель, и она немедленно откроет сообщение.

• Добавьте следующий код # 4 в свой Page_Load.

Код:

Для # 3:

<asp:Panel runat="server" ID="pnlLoading">
    <!-- Replace "form1" with your form 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;
}

Это приведет к отображению загружаемого изображения во время загрузки фактического содержимого страницы.

Ответ 3

Я нашел, что следующее решение прекрасно работает между страницами навигации, не затрагивая текущую структуру Ajaxification или сайта.

Просто опустите script в no-mans-land между заголовком и тегами запуска тела на главной странице.

Спасибо Субину за это.

http://subinsb.com/loading-bar-until-page-loads-completely-using-javascript

<script>
subinsblogla=0;
setInterval(function(){
if(document.readyState!='complete'){
 document.documentElement.style.overflow="hidden";
 var subinsblog=document.createElement("div");
 subinsblog.id="subinsblogldiv";
 var polu=99*99*99999999*999999999;
 subinsblog.style.zIndex=polu;
 subinsblog.style.background="black url(https://lh4.googleusercontent.com/-4WVJgCO93zc/UgpU2Y60CjI/AAAAAAAAC8E/R3XujnTjz3Y/s474/initializing.png) 50% 50% no-repeat";
 subinsblog.style.backgroundPositionX="50%";
 subinsblog.style.backgroundPositionY="50%";
 subinsblog.style.position="absolute";
 subinsblog.style.right="0px";
 subinsblog.style.left="0px";
 subinsblog.style.top="0px";
 subinsblog.style.bottom="0px";
 if(subinsblogla==0){
  document.documentElement.appendChild(subinsblog);
  subinsblogla=1;
 }
}else if(document.getElementById('subinsblogldiv')!=null){
 document.getElementById('subinsblogldiv').style.display="none";
 document.documentElement.style.overflow="auto";
}
},1000);
</script>

Он рекомендует вам не заменять имена переменных, потому что может быть другая переменная, и этот код не будет работать. Если вы хотите изменить Загрузка изображения, просто измените фоновый URL-адрес в переменной subinsblog.style.background.