Всем привет!
При открытии любого веб-сайта нам приходится ждать от 1 секунды до, кто знает, какого времени, пока загрузится страничка полностью. И пока грузится страничка, верстка сайта может ездить в разные стороны, придавая сайту исключительно привосходно-уродливый вид 
.
Чтобы скрыть эту бяку, можно во время загрузки показать пользователю анимацию, то есть, на сайте установить прелоадер для сайта (индикатор загрузки).
Как это работает?
Сама суть прелоадера заключается в том, что пока загружается сайт, мы видим только блок «#preloaders», в котором содержится анимированное изображение, иконка или даже обычная прикольная картинка. После того, как веб-страница загрузилась, блок «#preloaders» с изображением исчезнет и появится полностью загруженный сайт.
Приступим к реализации.
Чтобы сделать прелоадер для сайта, вставьте вот этот код сразу после тега <body>:
<!-- индикатор загрузки --> <div id="preloaders"> <img src="zagryz.gif"> </div>
zagryz.gif – это анимированная картинка 
В CSS напишите вот так:
#preloaders {
position: fixed; /*фиксированное положение блока*/
left: 0; /*положение элемента слева*/
top: 0; /*положение элемента сверху*/
right: 0; /*положение элемента справа*/
bottom: 0; /*положение элемента снизу*/
background: #fff; /*цвет заднего фона блока*/
z-index: 1001; /*располагаем его над всеми элементами на странице*/
}
#preloaders img {
font-size: 70px; /*размер иконки*/
position: absolute; /*положение абсолютное, позиционируется относительно его ближайшего предка*/
left: 50%; /*слева 50% от ширины родительского блока*/
top: 50%; /*сверху 50% от высоты родительского блока*/
margin: -35px 0 0 -35px; /*смещение иконки, чтобы она располагалась по центру*/
}
Теперь можем в самом низу, перед закрывающим тегом </body>, вставить вот такой код:
<script>
$(window).load(function() {
$('#preloaders').find('img').fadeOut().end().delay(400).fadeOut('slow');
});
</script>
Вот вам парочка анимированых индикаторов загрузки:
Остальные анимированых индикаторов загрузки вы можете посмотреть на этом сайте - preloaders.net/ru
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как вытащить любое значение с атрибута – JS
Сайт пока не может обработать этот запрос HTTP ERROR 500
Всплывающее окно (Модальное окно) на CSS при клике по ссылке или через указанное время
Как получить значение ID при клике по слову?Похожие статьи
Описание популярных счетчиков посещения сайта
Полезные плагины для wordpress. Описание
Hover-эффекты для картинок с помощью CSS-маски
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222515 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187679 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186563
5 Ответов на комментарий - Как сделать прелоадер для сайта (индикатор загрузки)
Добавить комментарий
Метки: Вебмастеру, для сайта, эффекты для сайта
Класс, круто!!! Отличный пост. Но вот сервис представленный в посте подгоняет понемногу, то черно-белый показывает загрузчик то вообще непонятно какой. Хотел выбрать цветной, но он с белым фоном постоянно, пытаюсь отредактировать на самом сервисе и нифига. А так спасибо за пост.
Воо… вроде разобрался немного с сервисом, но он все же переодически подгоняет. А так нормальный, пойдет
Анимашку можно скачать в сети любую и цветную. Тем более, там на сайте есть возмоность менять цвет индикатора загрузки, увеличивать размер и делать прозрачный фон.
Пожалуйста, Александр!
Степан, честно говоря я стараюсь не скачивать гифки не понятно откуда, так как именно в этот формат файла можно запихнуть помимо картинки исполняемый код, это на будущее если не в курсе. С сервисом разобрался, большое спасибо за ссылку.
Все работает, но картинка не успевает нормально отобразиться так как сайт очень быстро загружается. А так да, прикольный вариант для сайта если контент долговато подгружается.
Решил поэкспереминтировать на сайте клиента, и вот неудача
Спасибо. Однако $(window).load() is NOT available in jQuery 3.0 (у меня не захотело работать).
To get around it, you can use it as an “Event Handler Attachment”
$( window ).on("load", function() { // Handler for .load() called. });