Как добавить Ajax-загрузчик при загрузке страницы в asp.net?

Question

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

<div class="UpdateProgress1">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true">
<ProgressTemplate>
    <img src="image/ajax-loader.gif"  /> Loading ...
</ProgressTemplate>
</asp:UpdateProgress>
</div>

И мой CSS:

.UpdateProgress1 {
 color:#fff;
 position:fixed;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
 vertical-align: middle;
 text-align: center;
 background-color: #000;
 float: left;
 top:18%;
 left:13%;
 width:73%; 
 }

Если кто-нибудь знает какую-либо ссылку или какое-либо решение, пожалуйста, сообщите мне. и в приведенном выше CSS, если я добавлю свойство высоты, изображение будет отображаться во время загрузки страницы без события клика спасибо.

Answer 1

Похоже, что в вашем HTML есть опечатка:

<div id="wrappe">
---- Whole code goes here ----
</div>

Это должно называться "оболочкой".

Ваш JavaScript выдает ошибку, потому что document.getElementById("wrapper") возвращает ноль,у которого нет стиля свойства.

В каком браузере вы это тестируете?Вы должны увидеть маленький желтый значок предупреждения в левом нижнем углу окна IE, который даст вам некоторое представление об ошибке сценария.

Сведения об ошибке веб-страницы

Сообщение: требуется объектЛиния: 34Char: 13Код: 0URI: http://localhost:64888/ImageTest.aspx

Если вы используете Firefox, получите себе копию Developer Toolbar , которая даст вам приятный красный восклицательный знак и точную ошибку из JavaScript:

Ошибка: document.getElementById ("обертка") является нулевымИсходный файл: http://localhost:64888/ImageTest.aspx
Строка: 34

Answer 2

Используйте Iframe с более высоким z-индексом, чтобы заблокировать главную страницу.

<iframe id="blockPage" src="about:blank" style="display: none; position: absolute;
        z-index: 10; filter: Alpha(Opacity=40) DropShadow(Color=#454545);"></iframe>

Используйте следующие функции, чтобы показать и скрыть рамку

function BlockPageContent()
{
    var ifrm = document.getElementById("blockPage");
    if(null != ifrm)
    {
        ifrm.style.display = "block";
        ifrm.style.top = 0;
        ifrm.style.left =0;
        ifrm.style.width=screen.availWidth;
        ifrm.style.height = screen.availHeight; 
    }
}

function ShowPageContent()
{
    var ifrm = document.getElementById("blockPage");
    if(null!= ifrm && ifrm.style.display != "none")
    {
        ifrm.style.display = "none";
    }
}

и вызовите вышеуказанную функцию следующим образом.

Вызовите BlockPageContent в «InitializeRequest» и ShowPageContent в «EndRequest». «InitializeRequest» и «EndRequest» являются обработчиками событий объекта PageRequestManager.

Answer 3

Чтобы уточнить, что из следующего вы пытаетесь сделать:

1) Загрузить страницу и, когда пользователь вызывает постбэк, отобразить загрузчик, ожидая постбэк. 2) Показать загрузчик в начале страницы, которая на самом деле загружается.

Из описания это звучит как последнее. Если так, то это очень необычный подход. В зависимости от содержимого страницы может быть сложно узнать, когда она действительно «закончила загрузку». Для настройки HTML / Javascript лучше всего подойдет:

  $(document).ready(function() {
    // code to hide the loader animation
  });

(Обратите внимание, что для этого вам понадобится jQuery, если у вас его еще нет.)

Все может стать намного сложнее, если у вас есть контент, который задерживается по другим причинам, таким как ожидание загруженного скрипта или выполнение плагина для браузера (такого как Flash).