Индикатор загрузки

Karpo

Хочу сделать для ajax загрузок индикатор. С помощью методов ajaxStart и ajaxStop можно инициировать создание индикатора-изображения на одном из DOM элементов, но решение это не универсальное, так как заведомо неизвестно какая часть страницы в данный момент отображается, т.е. непонятно где рисовать индикатор. На Яндекс.Метрике и некоторых других сайтах видел иной тип индикации загрузки страницы. В центре возникает диалоговое окно с индикатором или индикатор без окна, остальная часть страницы затемняется. При этом возможно прокручивание страницы, при котором индикатор остаётся по центру. Подскажите как сделать такой индикатор.

Bomboos

юзайте JQuery UI, http://jquery.com виджет progressbar

Karpo

Bomboos, это не то. Мне не нужен прогресс - бар, мне достаточно крутящегося колёсика. Вся суть в диалоговом окне, которое затемняет задний план, и остаётся на своём месте при скроллинге. Как этого добиться?

Bomboos

JQuery UI виджет dialog его можно сделать модальным т.е. когда он открыт ничего нажать не получиться. Пример: http://jqueryui.com/demos/dialog/#modal-message

Karpo

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

Xander Bass

Код HTML:

Код HTML
1 2 3 4 5 <div class="wrapper" id="loadwnd"><center>   <div class="wndLoading">     <img src="loading.gif"/>   </div> </center></div>

Стили:

Код CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .wrapper {  width: 100%;  height: 70%;  padding-top: 30%;  background: rgba(0,0,0,0.5);  position: fixed;  left:0;  top: 0; } .wndLoading {  width: 30%;  height: 10%;  padding-top: 10%;  background: white;  border: 1px solid gray; }

Код js, рассчитанный на исчезновение окошка после полной загрузки страницы:

Код JavaScript
1 2 3 $(function(){  $('#loadwnd').fadeOut(200); });

В стилях вместо rgba для большей кроссбраузерности можно подставить PNG-рисунок 1 на 1 пиксель с альфаканалом. Да, и ещё это решение не совсем кроссбраузерно. "Осёл" не понимает значение fixed свойства position.

Bomboos

Ничего страшного, оно настраивается!

Код JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15   <script>     $(function() {         // a workaround for a flaw in the demo system ([url]http://dev.jqueryui.com/ticket/4375[/url]), ignore!         $( "#dialog:ui-dialog" ).dialog( "destroy" );             $( "#dialog-modal" ).dialog({                         draggable : false,                         resizable : false,             height: 140,             modal: true         });     });     </script>

Теперь окошко нельзя будет перетащить, и изменить его размер (растянуть). Это кроссбраузерно по идее)

Миниатюры

 

Bomboos

$.ajaxStart();

Код JavaScript
1 2 3 4 5    $("#loadwnd").ajaxStop(function(){    $(this).show();  });

$.ajaxStop();

Код JavaScript
1 2 3 4 5    $("#loadwnd").ajaxStop(function(){    $(this).hide();  });

Karpo

Bomboos, Получается, что элемент #dialog-modal должен заведомо находиться в теле страницы? Я не очень понял как работает библиотека, но не хотелось бы, чтобы в шаблоне был элемент, который вызывается только при ajax запросах. И ещё, раз позиция элемента фиксирована, то окно будет появляться всегда там, где оно прописано, не зависимо от того, в какой части страницы я нахожусь, я правильно понял?

Karpo

Спасибо,разобрался