[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Индикатор загрузки
Форум PHP программистов > Дизайн и верстка
MefiseRay
19.12.2011 - 11:18
Стоит задача сделать что-то вроде индикатора загрузки. сам функционал мне не нужен, он готов, необходимо, чтобы при сообщении в функцию определенного значения (процента например) индикатор заполнялся а внутри индикатора писалось значение в виде MAX/CURENT
где MAX - максимально возможное, CURENT - текущее.

С одной стороны в этом нет ничего сложного, и я пробовал делать несколько разных вариантов, они вполне рабочие, но сделать хороший индикатор с надписью, закруглениями на концах и работающий кросбраузерно у меня не получается. =(

Пробовал делать через бекграундпозитион - не поддерживается 6 эксплоером и рядом браузеров.
пробовал делать с помощью вложенного дива в див и изменением его размера - не могу воткнуть надпись.
Пробовал делать путем наложения слоев - много гемороя при вставке
Пробовал делать путем сдвига изображения - коряво отображается в фаерфоксе.
Пробовал делать через таблицу - аналогично как и с дивами надпись вставить не удалось

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

Заранее спасибо.



Спустя 42 секунды (19.12.2011 - 10:19) inpost написал(а):
MefiseRay
Это может только флеш.

Спустя 5 минут, 7 секунд (19.12.2011 - 10:24) MefiseRay написал(а):
я сам видел как подобная вещь рабоатет чисто через JavaScript. потерял ссылку правда =( знаю есть еще готовая библиотека джиквери и ряд функция для такого индикатора, но они не подходят так как там слишком все нагромождено и переписать функционал под себя слишком проблематично

Спустя 4 минуты, 32 секунды (19.12.2011 - 10:29) Игорь_Vasinsky написал(а):
в uploadify такая реализация есть. wink.gif

Спустя 7 минут, 18 секунд (19.12.2011 - 10:36) inpost написал(а):
Игорь_Vasinsky
И в ИЕ7 тоже работает?! Ага, не верю! smile.gif
Условие вот какое: "и работающий кросбраузерно"

Спустя 1 минута, 59 секунд (19.12.2011 - 10:38) Игорь_Vasinsky написал(а):
долой осла - да будет хром!

Спустя 2 минуты, 57 секунд (19.12.2011 - 10:41) inpost написал(а):
Игорь_Vasinsky
Долой 50% юзеров? smile.gif Не шути.

Спустя 10 минут, 38 секунд (19.12.2011 - 10:51) Игорь_Vasinsky написал(а):
Свернутый текст
а куда деваться.. будет стимул другой браузер полюбить

Спустя 2 минуты, 6 секунд (19.12.2011 - 10:54) MefiseRay написал(а):
решил задачу сам увидев на своем сайте один баг с дивами: "если текст в диве не умещается он выходит за его границ"

вот код:

<table style="width:200px; height:10px; color:#ffffff; background-color:#000000; border-collapse: collapse;
    border: none;" >
	<tr>
		<td style="width:200px; height:10px; color:#ffffff; background-color:#000000; border-collapse: collapse;
    border: none;">
			<div id='CURENT' style="width:75%; height:20px; color:#ffffff; background-color:#ff0000;border-collapse: collapse;
    border: none;" ><div>
			<div style="width:100%; height:0px; color:#ffffff;border-collapse: collapse;
    border: none;"><center>234/340</center><div>
		</td>
	</tr>
</table>

потомо просто пишем функцию которая меняет у элемента с id='CURENT' значение width и получаем наш индикатор. вместо фоновых цветов можно использовать фоновые картинки

Спустя 1 минута, 53 секунды (19.12.2011 - 10:55) inpost написал(а):
Игорь_Vasinsky
Итак, у тебя доход около 10-20 тыс $ в месяц. Либо ты платишь адекватному верстальщику и получаешь работу во всех браузерах, либо плюёшь в лицо 50% посетителей и сокращаешь популярность сайта на 30-40%. Потому что те, кто мог и хотел - уже перешли, остальные - выберут сайты конкурентов, где работа более существенна.
Ты на кого равняешься, на какого-то Васю из Деребасовской, или на крутых гугл-разработчиков, у которых во всех браузерах всегда всё круто работает?

Спустя 6 минут, 8 секунд (19.12.2011 - 11:02) Игорь_Vasinsky написал(а):
ну индикатор загрузки - я думаю это не такой уж важный момент biggrin.gif

Спустя 32 минуты, 24 секунды (19.12.2011 - 11:34) MefiseRay написал(а):
<table style="width:200px; 
			height:10px; 
			color:#ffffff; 
			background-color:#000; 
			border-collapse: collapse;
    		border: none;
    		border-radius:5px; 
    		-webkit-border-radius:5px; 
    		-moz-border-radius:5px; 
    		-khtml-border-radius:10px;
	 		margin: 0; 
	 		padding: 0;" 
    	>
	<tr>
		<td style="width:200px; 
			height:10px; 
			color:#ffffff; 
			background-color:#999; 
			background: url('http://wgc-online.ru/img/indicator_bg.png') repeat-x center;
			border-collapse: collapse;
    		border: none;
    		border-radius:5px; 
    		-webkit-border-radius:5px; 
    		-moz-border-radius:5px; 
    		-khtml-border-radius:10px
	 		margin: 0; 
	 		padding: 0;">
			<div style="width:75%; 
				height:10px; 
				color:#000000; 
				background-color:#ff0000;
				background: url('http://wgc-online.ru/img/indicator.png') repeat-x center;
				border-collapse: collapse;
		 		border: none;
		 		border-radius:5px; 
		 		-webkit-border-radius:5px; 
		 		-moz-border-radius:5px; 
		 		-khtml-border-radius:10px;
		 		margin: 0; 
		 		padding: 0;" 
		 	>
				<div style="width:100%; 
					height:0px; 
					color:#000000;
					border-collapse: collapse;
			 		border: none;
			 		border-radius:5px; 
			 		-webkit-border-radius:5px; 
			 		-moz-border-radius:5px; 
			 		-khtml-border-radius:10px;
			 		font-size:9px;
    				font-weight: 900;
			 		font-family: sans-serif;
			 		margin: 0; 
			 		padding: 0;"
			 	>
			 		<center>75%</center>
			 	</div>
			</div>
		</td>
	</tr>
</table>

вот финальная версия. джава кода тут нет. протестируйте ктонить в эксплоере, я на линуксе просто сижу а виртуалка вчера упала.

Спустя 4 минуты, 27 секунд (19.12.2011 - 11:38) MefiseRay написал(а):
пардон, нашел ошибку. правильнее будет так:
<table style="width:200px; 
			height:10px; 
			color:#ffffff; 
			background-color:#000; 
			border-collapse: collapse;
    		border: none;
    		border-radius:5px; 
    		-webkit-border-radius:5px; 
    		-moz-border-radius:5px; 
    		-khtml-border-radius:10px;
	 		margin: 0; 
	 		padding: 0;" 
    	>
	<tr>
		<td style="width:200px; 
			height:10px; 
			color:#ffffff; 
			background-color:#999; 
			background: url('http://wgc-online.ru/img/indicator_bg.png') repeat-x center;
			border-collapse: collapse;
    		border: none;
    		border-radius:5px; 
    		-webkit-border-radius:5px; 
    		-moz-border-radius:5px; 
    		-khtml-border-radius:10px
	 		margin: 0; 
	 		padding: 0;">
	 		<div style="width:0px; 
				height:0px; 
				color:#0000ff;
				border-collapse: collapse;
		 		border: none;
		 		border-radius:5px; 
		 		-webkit-border-radius:5px; 
		 		-moz-border-radius:5px; 
		 		-khtml-border-radius:10px;
		 		font-size:9px;
 				font-weight: 900;
		 		font-family: sans-serif;
		 		margin: 0; 
		 		padding-left: 90px;"
		 	>
		 		<center>75%</center>
		 	</div>
			<div style="width:75%; 
				height:10px; 
				color:#000000; 
				background-color:#ff0000;
				background: url('http://wgc-online.ru/img/indicator.png') repeat-x center;
				border-collapse: collapse;
		 		border: none;
		 		border-radius:5px; 
		 		-webkit-border-radius:5px; 
		 		-moz-border-radius:5px; 
		 		-khtml-border-radius:10px;
		 		margin: 0; 
		 		padding: 0;" 
		 	>
				
			</div>
		</td>
	</tr>
</table>

Спустя 7 минут, 9 секунд (19.12.2011 - 11:46) sergeiss написал(а):
Переместил тему в "Дизайн и верстка", в ПХП ей делать нечего.

Спустя 6 минут, 54 секунды (19.12.2011 - 11:53) killer8080 написал(а):
MefiseRay
зачем такие сложности? Такой вариант не устраивает?
<div style="width:300px; height:15px; border:1px solid #000; background-color:#FFF;">
    <div id="progressback" style="background-color:#09F; width:25%; height:15px;"></div>
    <div id="progresstext" style="position:relative; margin-top:-15px; text-align:center; font-size: 14px">25 %</div>
</div>

Спустя 4 минуты, 13 секунд (19.12.2011 - 11:57) MefiseRay написал(а):
Как вариант. но помнится тогда с дивами у меня проблемы были. щас точно не помню какие. то-ли с бекграундами, то ли еще с чем.

Спустя 1 минута, 16 секунд (19.12.2011 - 11:58) killer8080 написал(а):
MefiseRay
но с таблицами ИМХО перебор.

Спустя 11 минут, 14 секунд (19.12.2011 - 12:09) sebastjan написал(а):
Если речь о загрузке фото на сайт - то на мой взгляд однозначно флешь, так как только там нормально можно на строне клиента сразу сделать ресайз фото а уж потом что то грузить.
иначе проблемма , положат сайт при одновременной загрузке Н-го количества пользователей.
А во флешь сразу и реализовать анимацию загрузки.

Спустя 8 минут, 57 секунд (19.12.2011 - 12:18) MefiseRay написал(а):
в топку флеш. AJAX использовать лучше.

Спустя 5 минут, 37 секунд (19.12.2011 - 12:24) killer8080 написал(а):
Цитата (MefiseRay @ 19.12.2011 - 11:18)
в топку флеш. AJAX использовать лучше.

а как ты процесс аплоада собрался контролировать?
Тут либо флеш, либо JAVA. Первый предпочтительней из-за популярности.

Спустя 14 минут, 51 секунда (19.12.2011 - 12:39) MefiseRay написал(а):
AJAX - может контролирвоать степень загрузки если что. во вторых первый предпочтительнее потому что требует только flash плеер а не яву машину, но в обоих случаях у тебя не будет работать ничего на мобильных устройствах и маках. можно использовать gwt но это тот же ajax в итоге получится.

Спустя 14 минут, 46 секунд (19.12.2011 - 12:53) sebastjan написал(а):
Каким это интересно боком на Аяксе можно на стороне клиента сделать ресайз фото.
Что толку строить огромную логику, загрузка, контроль, ресайз на сервере.
Кому это надо на сервер валить столько задачь если самое лучшее это дело перенести самому юзеру.
К примеру простая задача, юзер имеет свою галерейку, ему надо туда грузить свои фотки - и что на чистом аяксе будешь делать?. wink.gif
Будет самый поганый сайт , который как минимум будет тормозить по страшному.
Эта тема уже давно раскрыта Flash uploader.



Спустя 58 минут, 7 секунд (19.12.2011 - 13:52) killer8080 написал(а):
Цитата (MefiseRay @ 19.12.2011 - 11:39)
AJAX - может контролирвоать степень загрузки если что.

это нужно извращаться с PECL расширениями, чистым php не обойдешься.

Спустя 3 часа, 4 минуты, 17 секунд (19.12.2011 - 16:56) MefiseRay написал(а):
ну во первых в наше время скорость инета у всех дай бог нормальная, а картинки ты не так уж и часто заливаешь чтобы сайт повис из-за этого, во вторых в настройках можно контролировать максимально допустимый размер файлов закачиваемых на сервер.

а вот проблему с тем что flash не может воспроизводиться на мобильных устройствах и маках, а теперь еще и на windows 8 (его запретили) + ходят слухи что от поддержки flash откажется еще ряд браузеров... вот с этим ты ничего не сделаешь. ajax взаимодействует как с сервером так и с клиентской частью, поэтому про особом желании и небольшом изврате можно заставить его изменить картинку. а вот что точно работет отменно так это GWT к сожалению многие не то что писать на нем не умеют та еще и не знают что это аткое. А это печально. Имхо будущее за ним.

Спустя 1 час, 32 минуты, 35 секунд (19.12.2011 - 18:28) sebastjan написал(а):
Цитата
ну во первых в наше время скорость инета у всех дай бог нормальная, а картинки ты не так уж и часто заливаешь чтобы сайт повис из-за этого, во вторых в настройках можно контролировать максимально допустимый размер файлов закачиваемых на сервер.


Ну -ну, а все такие дурные, сначало заливают а потом контролируют. smile.gif
При распаковке только одного мегабайта ЖПГ на сервере он в 30-50 мег памяти выходит.
При чём тут скорость инета, сервер просто уйдёт в даун.

поэтому сначало обрезают на стороне клиента фотку а уж потом грузят.

Цитата
ходят слухи что от поддержки flash откажется еще ряд браузеров.

вот такие вот они слухи.
В контакте на флексе сделали загрузку фото, в яндексе на кажись на чистом флешь.




Спустя 5 минут, 48 секунд (19.12.2011 - 18:34) Nikitian написал(а):
Цитата (sebastjan @ 19.12.2011 - 18:28)
При распаковке только одного мегабайта ЖПГ на сервере он в 30-50 мег памяти выходит.

Не используйте на больших объёмах конвертации gd. Что мешает конвертить консольной imagick? У него нет ограничения на память пыха, работать может во сколько угодно потоков и работает быстро, качественно.

Спустя 20 минут, 11 секунд (19.12.2011 - 18:54) sebastjan написал(а):
Nikitian
в случаи своего сервера?
На простом хостинге как если нет?
Как быть с ограниченью памяти хостингом?
Понятное дело что такие вещи как загрузка картинок - это как правило большие проэкты с ожиданием большого количества юзеров(высоконагруженность)
- Даже многопоточность не поможет ,100 человек по 1-Мег как минимум каждая картинка
-даже если их поставить в очередь - врядли кто дождётся результата.
-----------------------------------------------------------------------------------
А по поводу того что Автор Топика говорит о том что флешь не работает на мобильных устройствах, так и под мобильные устройства пишется совершенно другой программно-сайт.
А всунуть один сайт для мобильных устройств и обычного компа, так не делают.


Спустя 8 минут, 1 секунда (19.12.2011 - 19:02) Nikitian написал(а):
Проблемы ограниченности ресурсов возникают при жадности или неправильной бизнес-модели. Для небольших проектов с малой посещаемостью вполне уместно воткнуть приписку "файлы более 500 кб загружать низя" и воткнуть ограничение на размер файлов если не у nginx, то хотя бы у апача и большие картинки будут отваливаться с каким-нибудь красивым 500 кодом, если на него никакой заглушки не прибито.

Спустя 5 часов, 52 минуты, 15 секунд (20.12.2011 - 00:55) sebastjan написал(а):
В этом и грабли для юзера - когда стоит надпись - не загружать больше чем 500 кб.
Еслиб ещё хоть 10 процентов юзеров знали что такое 500кб.
Я к примеру знаю. smile.gif И мне это очень не нравится.
уж лучше предлагали бы сразу скачать софтину бесплатную для ресайза фото и подробное описание пользования, хотя и это 99% потеря пользователя.
Это будет похуже вёрстки - которая сделана с исключение ИЕ.
Эти грабли просто многих выводят из себя , потеря посетителя почти на 99%.
Потому и такая востребованность в флашь загрузчиках, полный инет предложений и спроса.
Всё перекидывают на клиента машину, там уменьшают и потом уже грузят.
Вот и вся логика бизнес модели, оставить ресурсы сервера на более важные дела.
А то что можно сделать у клиента на машине - то и надо делать.

Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.