Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/45: Рейтинг темы: голосов - 45, средняя оценка - 5.00
5 / 6 / 4
Регистрация: 03.12.2009
Сообщений: 267
1

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

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

Хочу сделать для ajax загрузок индикатор. С помощью методов ajaxStart и ajaxStop можно инициировать создание индикатора-изображения на одном из DOM элементов, но решение это не универсальное, так как заведомо неизвестно какая часть страницы в данный момент отображается, т.е. непонятно где рисовать индикатор. На Яндекс.Метрике и некоторых других сайтах видел иной тип индикации загрузки страницы. В центре возникает диалоговое окно с индикатором или индикатор без окна, остальная часть страницы затемняется. При этом возможно прокручивание страницы, при котором индикатор остаётся по центру. Подскажите как сделать такой индикатор.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
16.08.2011, 17:38
Ответы с готовыми решениями:

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

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

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

индикатор загрузки файла
ХауХау ребята, нужна ваша помошь. 1.Надо сделать чтоб пользователь выбирал не больше 3 файлов на...

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



JQuery UI виджет dialog его можно сделать модальным т.е. когда он открыт ничего нажать не получиться. Пример: http://jqueryui.com/demos/dialog/#modal-message
0
5 / 6 / 4
Регистрация: 03.12.2009
Сообщений: 267
19.08.2011, 02:11  [ТС] 5
Bomboos, это почти то, что нужно. Но в демке окно при скроллинге смещается вместе со страницей. Нужно, чтобы окно оставалось на месте
0
Йошь-мыслитель
124 / 118 / 26
Регистрация: 22.02.2009
Сообщений: 693
Записей в блоге: 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
15 / 15 / 3
Регистрация: 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
Миниатюры
Индикатор загрузки  
15 / 15 / 3
Регистрация: 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
5 / 6 / 4
Регистрация: 03.12.2009
Сообщений: 267
20.08.2011, 13:51  [ТС] 9
Bomboos, Получается, что элемент #dialog-modal должен заведомо находиться в теле страницы? Я не очень понял как работает библиотека, но не хотелось бы, чтобы в шаблоне был элемент, который вызывается только при ajax запросах. И ещё, раз позиция элемента фиксирована, то окно будет появляться всегда там, где оно прописано, не зависимо от того, в какой части страницы я нахожусь, я правильно понял?
0
5 / 6 / 4
Регистрация: 03.12.2009
Сообщений: 267
22.08.2011, 01:11  [ТС] 10
Спасибо,разобрался
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
22.08.2011, 01:11

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как сделать индикатор загрузки
Всем привет, если кому не трудно скиньте рабочую ссылку(ну или свой) на код с индикатором загрузки ...

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

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

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


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

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

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