JQuery, как показать сообщение ожидания во время загрузки страницы

Question

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

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

Отправляет запрос в серверную часть, а затем результаты возвращаются и затем отображаются. Я могу показать изображение ожидания на кнопке выбора, но когда страница отображает результаты с использованием displaytag, изображение отсутствует.

Я попробовал следующее:

<script type="text/javascript">

  $(document).ready(function() {
    $.blockUI({ message: '<h3><img src="../images/ajax-loader.gif" /> We are loading your request.  Please be patient.</h3>' });
  });

  $(window).load(function() {
    $.unblockUI();
  });  

</script>

Но, похоже, это не сработало. Изображение и сообщение отображаются в самом конце, а не во время рендеринга страницы.

Использование IE, если это имеет значение.

Answer 1

У меня есть еще один способ - jquery ui , в частности диалоговый виджет для отображения картинки .gif с опцией modal: true для блокировки интерфейса. Затем, если процесс завершен, вы можете просто уничтожить диалог, используя $( this ).dialog( "close" ) метод

Answer 2

Использование css:

#pageLoading { 
width:100%;
height: 100%;
background: black;
position:absolute;
z-index: 1000;
top: 0px;
left:0px;
}

Вы можете создать «маску» с загрузочным GIF внутри.Затем используйте ваш jquery для fadeOut () div, когда страница загружена.

Answer 3

$ (document) .ready (function () {}) вызывается после загрузки / отображения страницы.Перейти с ответом с супер-заголовком, использовать CSS, а затем исчезнуть после загрузки страницы.

Answer 4

Я собираюсь предположить, что вы отправляете ajax-запрос на сервер?Если это так, вы можете использовать jQuery ajaxStart и ajaxStop методы, как описано в this answer .