Как создать наложение страницы во время загрузки данных - asp.net/jquery/blockui - PullRequest
5 голосов
/ 26 октября 2011

Я пытаюсь отобразить наложение с надписью «загрузка страницы ... пожалуйста, подождите», пока данные извлекаются с сервера sql.Я надеюсь использовать плагин BlockUI для этого, но все подойдет.У меня есть страница ASP.NET с использованием site.master.Плагин работает, но что бы я ни пытался, он появляется только ПОСЛЕ полной загрузки страницы.

Основная часть ожидания сводится к работе, выполненной в файле Global.asax.В разделе Session_Start у меня есть функция, которая возвращает данные для заполнения раскрывающихся меню на моей странице.На это уходит около 20 секунд.

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

Ответы [ 2 ]

12 голосов
/ 26 октября 2011

Для загрузки страниц плагины не справятся с задачей

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

<body>
   ...
   <!-- make it last -->
   <div id="blocker">
       <div>Loading...</div>
   </div>
</body>

А CSS сделает все остальное

#blocker
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background-color: #000;
    z-index: 1000;
}
    #blocker div
    {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5em;
        height: 2em;
        margin: -1em 0 0 -2.5em;
        color: #fff;
        font-weight: bold;
    }

И Javascript, который снимает блокировку:

$(function(){
    $("#blocker").hide();
});

Это рабочий пример с использованием кода выше.Он удаляет блокировщик по таймауту, потому что это такой простой документ.

Важное замечание

Но, возможно, вы не правильно понимаете это.Возможно, вы хотели бы заблокировать существующую страницу, когда она отправляет обратно на сервер, потому что это другая история.В этом случае ваших плагинов должно хватить и они должны запускаться при unload оконном событии и отображать элемент блокирования.Это блокирует существующую страницу, пока она отправляет обратно свои данные и до того, как браузер начнет получать новый контент (который может быть заблокирован с помощью ранее показанной техники).

Кажется, проблема заключается в том, что браузер ожидает ответа сервера

Трудно сказать, так как вы не можете определить это сами.Но предположим, что проблема в том, что браузер ожидает ответа от сервера.И, как вы упоминаете, сессия загружается медленно.Две вещи:

  1. Оптимизация вызова БД для более быстрого получения этих данных меню (если это действительно занимает много времени - проверяли ли вы с помощью профилировщика?)
  2. Имеет статическую HTML-страницу по умолчанию, которая отображает Загружает содержимое и выполняет перенаправление:
    • с использованием тега обновления META - безопаснее для старых браузеров и браузеров без JavaScript
    • javascript - лучше для современных страниц и особенно потому, что вашСтраница использует Javascript (__doPostback любой)

Кажется, что ваша лучшая ставка - это комбинация обоих.Но делайте один шаг за раз и посмотрите, будет ли лучше.

Еще одна вещь. Я знаю, что ожидание первого ответа (запуск приложения) занимает некоторое время.Это происходит на многих страницах.Но люди обычно не беспокоятся, так как пользователи не могут нанести вред данным, потому что они все еще не отображаются.Гораздо хуже, когда время отклика при использовании страницы велико, потому что пользователи, как правило, нажимают одну и ту же кнопку несколько раз (например, при создании / обновлении данных).Это гораздо более вредно.

И, возможно, вы путаете запуск приложения Asp.net с загрузкой сеанса.Когда приложение запускается впервые, серверу требуется гораздо больше времени для ответа, поскольку он должен скомпилировать приложение и запустить его.Это может занять значительное время.Для этого есть несколько обходных путей, которые включают изменения времени перезапуска приложений и отдельных служб периодического оповещения, которые направляют крошечные запросы к приложению, просто чтобы поддерживать его в течение более продолжительного времени бездействия.

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

Так что, возможно, это не создание сеанса, а запуск приложения.Вы должны заметить разницу, открыв страницу в браузере и дождавшись ее завершения, затем закройте браузер и снова откройте его (чтобы будет создан новый сеанс) и получите доступ к вашему приложению.Если он загружается быстрее, то это не ошибка вашего сеанса, а скорее запуск приложения, когда .net framework должен скомпилировать ваше приложение.

Сначала определите проблему, а затем начните устранение .

0 голосов
/ 26 октября 2011

вы можете сделать это с помощью CSS.Создайте div, позиционированный как абсолют, поверх всего.Внутри этого раздела вы можете написать свое сообщение «Загрузка».Когда страница закончила загрузку, вы можете установить отображение: ни один на этом div, используя javascript.

...