Форум программистов, компьютерный форум CyberForum.ru

jQuery

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

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

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

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

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

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

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

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

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

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

Иконка загрузки - jQuery
Я никак не могу реализовать ещё одну штуку... в uploader'е при нажатии кнопки "upload" для отправки на сервер файла, чтобы поменять фотку...

После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Bomboos
15 / 15 / 1
Регистрация: 04.10.2009
Сообщений: 219
17.08.2011, 01:57     Индикатор загрузки #2
юзайте JQuery UI, http://jquery.com виджет progressbar
Karpo
5 / 6 / 2
Регистрация: 03.12.2009
Сообщений: 250
17.08.2011, 12:56  [ТС]     Индикатор загрузки #3
Bomboos, это не то. Мне не нужен прогресс - бар, мне достаточно крутящегося колёсика. Вся суть в диалоговом окне, которое затемняет задний план, и остаётся на своём месте при скроллинге. Как этого добиться?
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
Karpo
5 / 6 / 2
Регистрация: 03.12.2009
Сообщений: 250
19.08.2011, 02:11  [ТС]     Индикатор загрузки #5
Bomboos, это почти то, что нужно. Но в демке окно при скроллинге смещается вместе со страницей. Нужно, чтобы окно оставалось на месте
Xander Bass
Йошь-мыслитель
121 / 115 / 6
Регистрация: 22.02.2009
Сообщений: 670
Записей в блоге: 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.
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>

Теперь окошко нельзя будет перетащить, и изменить его размер (растянуть). Это кроссбраузерно по идее)
Миниатюры
Индикатор загрузки  
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.

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

Ускорение загрузки страницы - jQuery
Добрый день всем. При большом количестве элементов jQuery, страница сайта долго грузится. Подскажите пожалуйста как ускорить загрузку...

надпись во время загрузки - jQuery
есть селекты , в которые должны подгрузится опшены путем .load('somepage.php') , при обращении к somepage.php документ грузится примерно 5...

Ожидание загрузки контента - jQuery
Возникла проблема с сайтом, как бы он довольно тяжелый, но на компьютере открывается быстро, но если скорость интернета или на планшете или...

Статус загрузки изображения - jQuery
Вообщем есть такой вопрос, возможно ли на Jquery узнать когда загружается картинка, то есть не .load() который срабатывает после загрузки,...

Показывать процесс загрузки - jQuery
Всем привет! как сделать пока запрос отправляется что бы показывать процесс загрузки? А то до момента success: function (msg) { Надо...


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

Или воспользуйтесь поиском по форуму:
Karpo
5 / 6 / 2
Регистрация: 03.12.2009
Сообщений: 250
22.08.2011, 01:11  [ТС]     Индикатор загрузки #10
Спасибо,разобрался
Yandex
Объявления
22.08.2011, 01:11     Индикатор загрузки
Ответ Создать тему
Опции темы

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