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