×

Вокруг мира тунисОбщество, мирПетербург и окрестностифакты и мирВыборгпро сссрСтрашное и мистическоеКрымТайны историитурцияПоследние новости
Интересно МузыкаМистика и Гаданияуроки по html,css,js,phpАнекдоты
Исскуство и поэзия БасниМифы и Легенды древнего мираСтихи Золотого векаСтихи Серебренного векаПритчиЯпонские стихи и проза
Разные эпохи Древняя АзияСредневековьепро сссрСказки народов мираТайны истории
Разное ОригамиРаскраскиКонвертерыСтрашное и мистическоеКомедия "Дино и его друзья"
общество и мир факты и мирОбщество, мирАфоризмы и цитатыПсихологияПоследние новости

-----------

Вашему сайту нужна помощь? Политика конфидициальности Разместить рекламу

Делаем индикатор загрузки (progress bar)на css,js,html.


progress bar, css, html, js, java script, скрипт, код, пример, загрузки, загрузка, индикатор, прогресс, прогресса, сайта, блока, картинки, фотографии, mp3 плеера, плеер,

Бывают случаи, когда вы хотите создать какой-нибудь объект (картинку, mp3-плеер, блок с текстом) и прилепить к нему индикатор загрузки, чтобы пришедший на сайт посетитель видел, что объект и загружается. Я предлагаю вам рассмотреть простой индикатор загрузки (progress bar). В его основе будет лежать вращающаяся картинка банана и прикреплен он будет к mp3-плееру.

Для начала создайте класс prel и класс mydiv.
prel - будет показывать саму картинку с текстом - индикатор загрузки объекта.
mydiv - объект. Индикатор будет показывать загрузку этого объекта. В данном случае объектом будет mp3-плеер, но вы можете этот класс прикрепить к вашей картинке, блоку и к одному любому элементу на вашем сайте.
Обратите внимание на свойство display:none;!!! Работает оно следующим образом: гость заходит на сайт -> грузится блок с плеером, а сам mp3 плеер скрывается за картинкой индикатора -> блок загружен -> скрипт меняет свойство block:none на block:display. -> Скрывается картинка индикатора и появляется полностью загруженный mp3 плеер.


<div style='width:300px;' class='prel'>
Страничка грузиться, а вот и индикатор загрузки:<img src='imgdf/2913324.gif'/>
</div>
<div class='mydv' style='display:none;'>
<audio id='radiorg' preload='auto' tabindex='0' controls='' type='audio/mpeg'>
<source type='audio/mp3' src='files\med\mediv (11).mp3'>обнови браузер на новый плиззз, у тебя не поддерживается html5 :(
</audio>
</div>

В данном случае понадобиться простейший java script код. Разместите его ПОД html кодом вашего объекта (mp3 плеера).
В скрипте тоже есть класс .mydv и .prel и вышеупомянутый display:block;

$(window).load(function() {
$('.prel').fadeOut(0);
$('.mydv').css('display', 'block');
});

Весь исходный код будет выглядеть следующим образом:

<div style='width:300px;' class='prel'>
Страничка грузиться, а вот и индикатор загрузки:<img src='imgdf/2913324.gif'/>
</div>
<div class='mydv' style='display:none;'>
<audio id='radiorg' preload='auto' tabindex='0' controls='' type='audio/mpeg'>
<source type='audio/mp3' src='files\med\mediv (11).mp3'>обнови браузер на новый плиззз, у тебя не поддерживается html5 :(
</audio>
</div>
<script>
$(window).load(function() {
$('.prel').fadeOut(0);
$('.mydv').css('display', 'block');
});
</script>

Посмотреть на работу скрипта можно ТУТ.
Вот так удалось создать простейший индикатор загрузки, который не будет убивать ваш сайт размерами и накрученностью скрипта.

НУЖНО ЛИ СТАВИТЬ НА САЙТ ИНДИКАТОР ЗАГРУЗКИ?
Теперь я хочу отступить от темы и написать, что по возможности индикаторы загрузок, бары загрузок (progress bar) лучше вообще не использовать на сайте. Потому, что от них больше минусов, чем плюсов.
- во первых они требуют загрузки дополнительного изображения или кода.
- Пользователь с медленным интернетом помимо того, что будет пыхтя ждать загрузки вашего сайта, будет еще и ждать загрузки какого-то там изображения и скрипта с индикатором.
- прогресс загрузки сайта во весь экран (иначе называемое intro progress bar) - не надо никогда ставить на сайт. Они вызывают лишь лютую ненависть к сайту из-за того, что без 100% загрузки страницы гость не сможет даже прочесть и части текста с вашего сайта.
- не забывайте и про то, что некоторые индикаторы требуют подключения дополнительных библиотек jquery, bootstrap и т.д.
- индикатор загрузки с цифрами ВСЕГДА выводит больше всего. Более того, такой индикатор еще более тяжелый. Представьте, что вы пришли на сайт и видите, что первые 80% загрузились за 2 секунды, а остальные 20% грузятся уже более 5 секунд. Это происходит всегда из-за того, что html макет с текстом браузер загрузил быстро, а css и js скрипты грузятся дольше.

Вывод: индикаторы прогресса загрузки лучше использовать в случаях, когда вы уверены в том, что объект к которому вы хотите закрепить progress bar будет грузиться дольше, чем сам progress bar. А лучше вообще не использовать...
Помните все долго грузится видеоплееры, аудиоплееры, видео сайты, соц. сети, фотохостинги? В 70% случаев они такие медленные лишь из-за индикаторов загрузок, которые там прилеплены ко всему что движется: фото, видео, аудио, тексту и т.д.



Комментарии

Комментариев пока нет. Оставь тут свой комментарий или анекдот!


Комментарии к посту






Чтобы понять то, что говорит американец, знание английского языка недостаточно.

Валерий Афонченко


Norway
Рыба барракуда отличается крайней вредностью в случае болезни. Она начинает есть определенные растения, которые делают ее мясо ядовитым. Так что в случае ее смерти хищник, имеющий неосторожность закусить ею, погибнет.

[ Интересные факты о мире ]






Объеденить два блока в одном. css, html
Динамичные страницы. Уместить несколько страниц в одну
про ссср Выборг Общество, мир Крым Последние новости тунис Страшное и мистическое Петербург и окрестности Тайны истории факты и мир турция






×

Рассказы из категории: Создание сайта (html,css,php,js)