События в этот день
(даты, события, история)

Узнай про космос
(ввселенная, планеты, фазы луны)

Новые статьи:

Что такое родина? и как её понимают люди разных поколений?


Самые жестокие люди в истории мира


Самые глубокие места в мире


Как перенести контакты и номера с microsoft phone lumia (смартфона) на другой смартфон Анд


Главное отличие Кока-колы от пепси.


Православная церковь в Африке. Тунис.


Что было бы если СССР бы не распался?


Что такое психологические границы?


Подборка фотографий с призраками. НАСТОЯЩИЕ ФОТО


Как вставить данные в базу данных (таблицу)?


Иллюзии цвета. Обман зрения.



“Позорить свое отечество – значит предавать его.”

Виктор Гюго

Следующая цитата »

Это факт!


Взрослая лягушка съедает за всю свою жизнь более 3 тонн комаров.

Следующий факт »

Ра оставил тебе послание!... (0о0)

Делаем индикатор загрузки (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% случаев они такие медленные лишь из-за индикаторов загрузок, которые там прилеплены ко всему что движется: фото, видео, аудио, тексту и т.д.




ОТКРЫТЬ КОММЕНТАРИИ Закрыть комментарии




Введите ЛЮБОЕ число ЦИФРОЙ от НУЛЯ до ДЕСЯТИ (проверка на бота)



P.S. сайт и некоторые статьи и сказки (с ошибками, неполные) корректируются, дорабатываются и удаляются.
Желательно, чтобы вы добавили в комментарий, то что бы вы хотели бы исправить, удалить или наоборот добавить на портал (сайт) , такие комментарии читаются и обязательно учитываются добрым админом :). (например: "добавьте раздел поэзии", "исправьте ошибку на странице: (recsgames.ru/example44)", "добавьте функцию такую-то" и прочее).
С уважением, создатель портала. :)





Почитать интересные истории:




Сырно написано? Заложи страницу в закладки :)








×

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



info:

Bonjour Mon'Amie! Спасибо за прочтение!
Всем веселья и добра! :)