Форум программистов, компьютерный форум, киберфорум
Наши страницы

jQuery

Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 62, средняя оценка - 4.76
Karpo
5 / 6 / 2
Регистрация: 03.12.2009
Сообщений: 265
#1

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

16.08.2011, 17:38. Просмотров 7986. Ответов 9
Метки нет (Все метки)

Хочу сделать для ajax загрузок индикатор. С помощью методов ajaxStart и ajaxStop можно инициировать создание индикатора-изображения на одном из DOM элементов, но решение это не универсальное, так как заведомо неизвестно какая часть страницы в данный момент отображается, т.е. непонятно где рисовать индикатор. На Яндекс.Метрике и некоторых других сайтах видел иной тип индикации загрузки страницы. В центре возникает диалоговое окно с индикатором или индикатор без окна, остальная часть страницы затемняется. При этом возможно прокручивание страницы, при котором индикатор остаётся по центру. Подскажите как сделать такой индикатор.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
16.08.2011, 17:38
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Индикатор загрузки (jQuery):

Индикатор загрузки - jQuery
Привет ребят! У меня аяксом отправляются данные из формы, в том числе и картинка, на сервере эта картинка обрабатывается (сжимается,...

Индикатор загрузки на AJAX - jQuery
Добрый день! Возник такой вопрос: есть ajax запрос $.ajax({ type: 'POST', data: '...', url: "php/php_registration.php", ...

Индикатор загрузки изображения - jQuery
Кажись я облазил весь сей форум, но безрезультатно... Дело такое: У меня стоит некий скрипт, при клике на изображения, который...

Индикатор загрузки контента через AJAX - jQuery
Здравствуйте. Ситуация такая: при клике по ссылке аяксом получаю данные (текст и изображения). На то время, пока данные полностью не...

[jQuery] Загрузка картинки. Индикатор загрузки картинок - jQuery
Здравствуйте,на страницы есть несколько картинок,которые медленно загружаются, помогите, пожалуйста сделать так,чтобы пока изображение...

Полоса загрузки изображения, отобразить прогресс загрузки - jQuery
загружаю изображения на сервер с помощью аякса, подскажите как можно узнать(с помощью какой функции) полный объем картинки, и сколько уже...

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



JQuery UI виджет dialog его можно сделать модальным т.е. когда он открыт ничего нажать не получиться. Пример: http://jqueryui.com/demos/dialog/#modal-message
0
Karpo
5 / 6 / 2
Регистрация: 03.12.2009
Сообщений: 265
19.08.2011, 02:11  [ТС] #5
Bomboos, это почти то, что нужно. Но в демке окно при скроллинге смещается вместе со страницей. Нужно, чтобы окно оставалось на месте
0
Xander Bass
Йошь-мыслитель
121 / 115 / 6
Регистрация: 22.02.2009
Сообщений: 675
Записей в блоге: 5
19.08.2011, 07: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.
0
Bomboos
15 / 15 / 1
Регистрация: 04.10.2009
Сообщений: 219
19.08.2011, 12: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>

Теперь окошко нельзя будет перетащить, и изменить его размер (растянуть). Это кроссбраузерно по идее)
1
Миниатюры
Индикатор загрузки  
Bomboos
15 / 15 / 1
Регистрация: 04.10.2009
Сообщений: 219
19.08.2011, 13: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.

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

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

Круговой индикатор - jQuery
Ребята привет, помогите разобраться, как сделать круговой индикатор такой как тут? http://kottenator.github.io/jquery-circle-progress/ ...

Кнопка загрузки файла и индикатор загрузки в этой же кнопке - JavaScript
Как из двух input &lt;form action=&quot;change_avatar.php&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt; &lt;input type=&quot;file&quot; name=&quot;file&quot;...

Индикатор загрузки - JavaScript
Здравствуйте! Столкнулась с глупой проблемой - необходимо было организовать отображение 3d модели и написать для нее индикатор загрузки....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru