×

Вокруг мира КрымСтрашное и мистическоеВыборгПетербург и окрестноститурцияПоследние новоститунисТайны историифакты и мирпро сссрОбщество, мир
Интересно уроки по 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
Большая часть сувениров, которые продает исторический музей США в Вашингтоне — китайского производства.

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






Не сохраняются абзацы и новые строки PHP MySQL
Удаление дубликатов строк из таблицы MySQL
Последние новости про ссср Крым Тайны истории Общество, мир Выборг Петербург и окрестности турция факты и мир Страшное и мистическое тунис






×

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