качественная разработка веб сайтов
Стабильную работу вашего сайта может обеспечить только действительно хороший датацентр
Вы качали прикольные картинки на телефон бесплатно с kalinmob.ru ?
Я качаю мишки тедди картинки скачать с kuso4ek.ru
Прогресс-бар – наброски)
Прогресс-бар на photowar.ru
Сидел я сегодня на работе и думал чем бы заняться) И как положено посетила идея, дайка я переделаю один из своих проектов. Как известно дурное дело – дело не хитрое)
Спустя н-часов обновленный photowar.ru был готов.
ЗЫ: Истина, спасибо за помощь с логотипом)
Но проблема была в том что до конца рабочего дня осталось еще довольно много времени, и я решил позаниматься украшательствами.
Ну а теперь подробнее:
Одна из задач проекта загружать и обрабатывать большое количество фотографий, причем из одной исходной создается 4 разно размерных, и при сет_тайме(100), успевало обработаться только 20-25 картинок, тогда как в ожидание было более 500.
Стоит ли дальше писать что меня посетила гениальная идея сделать все это с нормальным прогресс-баром и сидеть медитировать на него)
А теперь то что получилось.
ЗЫ: Это не полноценный рабочий скрипт, а скорее наброски и алгоритмика.
Делать все будем в фоне с помощью аякса.
Вот компоненты:
верстка:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $count - общее количество записей $pi - один процент ($count/100) в спане с ид=count_text храним количество уже обработанных записей <div style="background:#111; border:1px solid #333"><!--Фон прогресс-бара--> <div style="position:absolute; width:90%; padding-top:10px" align="center"> Обработано <strong><span id="count_text">0</span></strong> из <strong><?=$count?></strong> </div> <!--Сам ползунок--> <div id="progres" style="background:url(/template/images/bg.jpg); height:40px; width:0%"></div> </div> <!--Чат с информацией о состояние и отчетами--> <div id="statist" style=" overflow: auto; height:200px; border:1px solid #333; margin-top:10px; background:#111"></div> <!--запуск процесса--> <div id="operator"><script>upload('<?=SERVER1?>',<?=$pi?>)</script></div> |
код js (jqwery)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | function upload(server,pi){ $.ajax({ type: "POST", cache: false, url: AJAX_PATCH, data: "function=upload&server="+server, success: function(msg){ if(msg=='exit'){ //завершение обработчика document.getElementById('statist').innerHTML = "<b>Обработка завершена</b>"+document.getElementById('statist').innerHTML; //сразу закрываем ползунок document.getElementById('progres').style.width = "100%"; }else{ //текущий элемент con=parseInt(document.getElementById('count_text').innerHTML); //увеличиваем счетчик document.getElementById('count_text').innerHTML = con+1; //процент для ползунка proc=con/pi; //присваиваем значение ползуну document.getElementById('progres').style.width = proc+"%"; //выводим в чат сообщение сервера document.getElementById('statist').innerHTML = msg + document.getElementById('statist').innerHTML; //запускаем наш скрит еще раз upload(server,pi); } } }); } |
Думаю пхп-шный код тут приводить не надо и так понятно, что в аяксе пхп обрабатывает одну запись, в моем случае фотографию)
2 комментария на Прогресс-бар – наброски)
Ваш отзыв
Классификатор
- JS (1)
- PHP (16)
- блогинг (4)
- Блогообзор (2)
- Веб-мастеру (11)
- интересное (19)
- Мой скрипт (10)
- Новости (12)
Теги
|
Поиск
Комментарии
- Александр Борисов к записи Постовой – плагин для WordPress
- sidash к записи Постовой – плагин для WordPress
- Alexander к записи Постовой – плагин для WordPress
- LaaCrus к записи Старт блогообзора
- ИстинА к записи Работа с почтой средствами PHP
+1)
Все бы хорошо, но зачем в обработчике событий чистый JS если в скобочках вы пишите, что это JQery ? Код в разы был бы меньше