Форум программистов, компьютерный форум CyberForum.ru
CyberForum.ru - форум программистов и сисадминов > > >
Восстановить пароль Регистрация
 
Karpo
Форумчанин
5 / 6 / 1
Регистрация: 03.12.2009
Сообщений: 198
16.08.2011, 18:38     Индикатор загрузки   #1
Хочу сделать для ajax загрузок индикатор. С помощью методов ajaxStart и ajaxStop можно инициировать создание индикатора-изображения на одном из DOM элементов, но решение это не универсальное, так как заведомо неизвестно какая часть страницы в данный момент отображается, т.е. непонятно где рисовать индикатор. На Яндекс.Метрике и некоторых других сайтах видел иной тип индикации загрузки страницы. В центре возникает диалоговое окно с индикатором или индикатор без окна, остальная часть страницы затемняется. При этом возможно прокручивание страницы, при котором индикатор остаётся по центру. Подскажите как сделать такой индикатор.
AdAgent
Объявления
16.08.2011, 18:38     Индикатор загрузки
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
16.08.2011, 18:38     Индикатор загрузки
Посмотрите здесь:

jQuery Иконка загрузки
jQuery Индикатор загрузки контента через AJAX
jQuery надпись во время загрузки
jQuery Статус загрузки изображения
jQuery Индикатор загрузки на AJAX
Bomboos
Форумчанин
15 / 15 / 1
Регистрация: 04.10.2009
Сообщений: 219
17.08.2011, 02:57     Индикатор загрузки   #2
юзайте JQuery UI, http://jquery.com виджет progressbar
Karpo
Форумчанин
5 / 6 / 1
Регистрация: 03.12.2009
Сообщений: 198
17.08.2011, 13:56  [ТС]     Индикатор загрузки   #3
Bomboos, это не то. Мне не нужен прогресс - бар, мне достаточно крутящегося колёсика. Вся суть в диалоговом окне, которое затемняет задний план, и остаётся на своём месте при скроллинге. Как этого добиться?
Bomboos
Форумчанин
15 / 15 / 1
Регистрация: 04.10.2009
Сообщений: 219
17.08.2011, 15:10     Индикатор загрузки   #4
Цитата Сообщение от Karpo Посмотреть сообщение
Вся суть в диалоговом окне, которое затемняет задний план, и остаётся на своём месте при скроллинге.



JQuery UI виджет dialog его можно сделать модальным т.е. когда он открыт ничего нажать не получиться. Пример: http://jqueryui.com/demos/dialog/#modal-message
Karpo
Форумчанин
5 / 6 / 1
Регистрация: 03.12.2009
Сообщений: 198
19.08.2011, 03:11  [ТС]     Индикатор загрузки   #5
Bomboos, это почти то, что нужно. Но в демке окно при скроллинге смещается вместе со страницей. Нужно, чтобы окно оставалось на месте
AdAgent
Объявления
19.08.2011, 03:11     Индикатор загрузки
Xander Bass
Йошь
116 / 110 / 1
Регистрация: 22.02.2009
Сообщений: 615
19.08.2011, 08:33     Индикатор загрузки   #6
Код HTML:
Код HTML5
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
Форумчанин
15 / 15 / 1
Регистрация: 04.10.2009
Сообщений: 219
19.08.2011, 13:36     Индикатор загрузки   #7
Цитата Сообщение от Karpo Посмотреть сообщение
Bomboos, это почти то, что нужно. Но в демке окно при скроллинге смещается вместе со страницей. Нужно, чтобы окно оставалось на месте
Ничего страшного, оно настраивается!

Код JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
<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
Форумчанин
15 / 15 / 1
Регистрация: 04.10.2009
Сообщений: 219
19.08.2011, 14:47     Индикатор загрузки   #8

Не по теме:

Цитата Сообщение от Xander Bass Посмотреть сообщение
Код js, рассчитанный на исчезновение окошка после полной загрузки страницы:
Код JavaScript
1
2
3
$(function(){
$('#loadwnd').fadeOut(200);
});
Этот код расчитан на исчезновение, не зависимо от статуса загрузки.



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

Не по теме:

Добавлено через 1 час 8 минут
IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, and Google Chrome.

Karpo
Форумчанин
5 / 6 / 1
Регистрация: 03.12.2009
Сообщений: 198
20.08.2011, 14:51  [ТС]     Индикатор загрузки   #9
Bomboos, Получается, что элемент #dialog-modal должен заведомо находиться в теле страницы? Я не очень понял как работает библиотека, но не хотелось бы, чтобы в шаблоне был элемент, который вызывается только при ajax запросах. И ещё, раз позиция элемента фиксирована, то окно будет появляться всегда там, где оно прописано, не зависимо от того, в какой части страницы я нахожусь, я правильно понял?
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.08.2011, 02:11     Индикатор загрузки
Еще ссылки по теме:

jQuery Ожидание загрузки контента
jQuery Плагин загрузки аватарок
jQuery Полоса загрузки изображения, отобразить прогресс загрузки
Karpo
Форумчанин
5 / 6 / 1
Регистрация: 03.12.2009
Сообщений: 198
22.08.2011, 02:11  [ТС]     Индикатор загрузки   #10
Спасибо,разобрался
Yandex
Объявления
22.08.2011, 02:11     Индикатор загрузки
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Опции темы

Текущее время: 09:12. Часовой пояс GMT +4.
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.7 PL3
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Яндекс.Метрика