BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Вебмастеру » Как сделать прелоадер для сайта (индикатор загрузки)

Как сделать прелоадер для сайта (индикатор загрузки)

2016-04-17 / Вр:00:02 / просмотров: 5792

Всем привет!
При открытии любого веб-сайта нам приходится ждать от 1 секунды до, кто знает, какого времени, пока загрузится страничка полностью.  И пока грузится страничка, верстка сайта может ездить в разные стороны, придавая сайту исключительно привосходно-уродливый вид :grin:.

Чтобы скрыть эту бяку, можно во время загрузки показать пользователю анимацию, то есть, на сайте установить прелоадер для сайта (индикатор загрузки).

Как это работает?

Сама суть прелоадера заключается в том, что пока загружается сайт, мы видим только блок «#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>

Вот вам парочка анимированых индикаторов загрузки:

парочка анимированых индикаторов загрузки парочка анимированых индикаторов загрузки парочка анимированых индикаторов загрузки парочка анимированых индикаторов загрузки парочка анимированых индикаторов загрузки парочка анимированых индикаторов загрузки 143 парочка анимированых индикаторов загрузки парочка анимированых индикаторов загрузки парочка анимированых индикаторов загрузки парочка анимированых индикаторов загрузки парочка анимированых индикаторов загрузки Как сделать прелоадер для сайта (индикатор загрузки)

Остальные анимированых индикаторов загрузки вы можете посмотреть на этом сайте - preloaders.net/ru

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

4 Ответов на комментарий - Как сделать прелоадер для сайта (индикатор загрузки)

  1. Класс, круто!!! Отличный пост. Но вот сервис представленный в посте подгоняет понемногу, то черно-белый показывает загрузчик то вообще непонятно какой. Хотел выбрать цветной, но он с белым фоном постоянно, пытаюсь отредактировать на самом сервисе и нифига. А так спасибо за пост. :arrow:

    Ответить

    Александр отвечает:

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

    Александр отвечает:

    Степан, честно говоря я стараюсь не скачивать гифки не понятно откуда, так как именно в этот формат файла можно запихнуть помимо картинки исполняемый код, это на будущее если не в курсе. С сервисом разобрался, большое спасибо за ссылку.
    Решил поэкспереминтировать на сайте клиента, и вот неудача :idea: Все работает, но картинка не успевает нормально отобразиться так как сайт очень быстро загружается. А так да, прикольный вариант для сайта если контент долговато подгружается.

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 787
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4386