Я разрабатываю сайт, который обслуживает некоторые медленные (время загрузки до 4 секунд) страницы из-за обширных запросов к базе данных.
Чтобы пользователи знали, что загружается новая страница (также для предотвращения множественных щелчков), я показываю div с фальшивой полосой загрузки на странице, где пользователи щелкнули ссылку на страницу с медленной загрузкой.
На самом деле, показ поддельного загрузочного div работает очень хорошо. DOM старой страницы (с фальшивой полосой загрузки) по-прежнему отображается при загрузке новой страницы, что означает, что загружаемый div отображается до тех пор, пока новая страница не будет готова к отображению.
Вот как это делается. HTML-часть:
<!-- link example which will execute the javascript -->
<a href="link/to/slow/page/" class="loading">slow page</a>
<!-- full screen div which gets displayed when clicking a
"loading" class link. -->
<div id="dim" style="display:none; top:0; left:0; width:100%; height:100%; z-index:9999;">
<div id="loading">
<p>loading data, please wait...</p>
<img src="loading.gif" alt="loading..." />
</div>
</div>
Часть Javascript (jQuery):
$(".loading").each(function() {
$(this).click(function() {
$("#dim").fadeIn();
});
return true;
});
Проблема теперь заключается в том, что если пользователь снова щелкает в браузере (только что протестировано с помощью FF 3.6) с медленной страницы, div полосы загрузки все еще иногда отображается.
Вопросы:
- Это вообще хороший способ создать такую фальшивую полосу загрузки?
- Если да, есть ли способ запретить браузерам отображать div при возврате в историю браузера?
Спасибо за любые подсказки.
Вывод:
похоже, нет простого способа подделать это таким образом. Я собираюсь получить данные Ajax с реальной полосой загрузки.
