Главная
Web-дизайн
Прелоадер для сайта на javascript или как не показывать сайт пока полностью не загрузится

Прелоадер для сайта на javascript или как не показывать сайт пока полностью не загрузится

прелоадер

Доброго времени суток. 🙂

Делал я посадочную страницу - Landing Page, которая была насыщена скриптами, изображениями и разной анимацией. Загрузка страницы происходила примерно за 5 секунд. Это не так уж и много, но в это время на экране сначала появлялась HTML разметка, потом начинали срабатывать скрипты и наконец появлялись изображения. Если посетитель не терпелив, он начинает скролить страницу, а та в это время слабо напоминает полноценный сайт и постоянно скачет, чем немного напрягает.

Тогда я немного поразмыслив, решил, что нужно что-то, что скроет загрузку сайта, а покажет что-то в замен, а когда страница загрузится полностью, тогда уже будет показан посетителю в полном объеме. Поискав немного то что мне нужно, я скрестил несколько скриптов и немного добавил своего в стилях, я получил нужный мне результат. Теперь посетители посадочной страницы видят небольшую заставку, прежде чем увидят полностью загруженный контент. Скрипт работает таким образом, что он грузится в первую очередь и показывает то, что мы зададим в настройках, после загрузки страницы браузер вызывает событие window.onload и наш скрипт показывает загруженную страницу.

Выглядит это примерно так, чем дольше будет грузится страница, тем дольше будет показана заставка:



Пример

На свой сайт или страницу подключить такой прелоадер, можно довольно не сложно. Первое что понадобится сделать для осуществления задумки, это конечно же вставить HTML разметку. Сделать это можно, например в шапке сайта. Вставьте в любое место, лучше всего сразу после открывающего тега body. Это основной блок с ID p_prldr, который будет заполнять весь экран и внутри которого можно расположить что угодно, что увидит посетитель до полной загрузки страницы. Внутри этого блока разместим анимацию загрузки и текст.

<div id="p_prldr"><div class="contpre"><span class="svg_anm"></span><br>Подождите<br><small>идет загрузка</small></div></div>

Далее в файл стилей задаем настройки отображения нашего прелоадера.

#p_prldr{
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
background: #9A12B3;
z-index: 30;}

.contpre small{font-size:25px;}

.contpre{
width: 250px;
height: 100px;
position: absolute;
left: 50%;top: 48%;
margin-left:-125px;
margin-top:-75px;
color:#fff;
font-size:40px;
letter-spacing:-2px;
text-align:center;
line-height:35px;}

#p_prldr .svg_anm {
position: absolute;
width: 41px;
height: 41px;
background: url(images/oval.svg) center center no-repeat;
background-size:41px;    
margin: -16px 0 0 -16px;}

Блок с классом svg_anm, это наша анимация. В своем прелоадере я использую SVG графику для анимации. Ее можно масштабировать до нужных мне размеров и выглядит она реалистично и прикольно. Если хотите, можете использовать какую-то GIF анимацию или просто статичную картинку, все зависит от Вашей фантазии. У меня это файл oval.svg его размер я установил параметром background-size:41px;, также нужно указать ширину и высоту блока равную размерам анимации. width: 41px; height: 41px;

Если Вам тоже по душе такая анимация, можете выбрать из ниже приведенных, для этого правой кнопкой миши щелкните по нужной и сохраните в нужную папку.

Сохранить изображение

Ну и сами анимации.

Фон анимации установлен вручную и он будет у Вас как в основном блоке прелоадера, сама анимация белая, так что если откроете ее после скачивания, то ничего не увидите 🙂 Чтобы потом не писали, что не работает.

Чтобы все заработало, нужно добавить сам скрипт прелоадера, но для начала Вы должны убедится, что у Вас подключена библиотека jQuery. Если это не сделано то в шапку перед закрывающимся head или в подвал перед закрывающимсяbody добавляем такую строку:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>  

После нее, вставляем уже сам скрипт.

<script type="text/javascript">$(window).on('load', function () {
    var $preloader = $('#p_prldr'),
        $svg_anm   = $preloader.find('.svg_anm');
    $svg_anm.fadeOut();
    $preloader.delay(500).fadeOut('slow');
});</script>

Если Вы не меняли айди главного блока и класс блока с анимацией, то в скрипте менять ничего не надо. Можно только настроить одну вещь, а именно задержку перед показом страницы. Когда страница загрузится, блок с анимацией исчезнет и плавно появится содержимое страницы, но можно установить еще задержку. В данном скрипте она равна 500 миллисекундам то есть пол секунды, можете уменьшить или наоборот увеличить если Вам это нужно.

Все сделано правильно и результат должен порадовать Вас. Главное не спешите и внимательно выполните инструкцию.

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(28 голосов, в среднем: 5 из 5)

Опубликовано 14 комментариев

  • Федор
    Комментариев: 1

    Спасибо, работает норм. Подскажите пожалуйста как добавить к нему прогресс загрузки в процентах , ну вот от 0 до 100%???

  • artemmian
    Комментариев: 1

    эту строчку лучше убрать, а то анимация срабатывает 1 раз и исчезает
    $spinner.fadeOut();

  • Mike
    Комментариев: 1

    Добрый день! Сделал видеофон для preloader и вроде все норм... но только когда я кликаю по следующей страницы а потом возвращаюсь то preloader опять работает. Подскажите как сделать чтобы preloader загружался только один раз при загрузке сайта, а потом не работал?

  • Александр
    Комментариев: 1

    Хороший кроссбраузерный прелоадер

  • Евгений
    Комментариев: 1

    Виталий, благодарю за хорошее решение!
    Как раз вот это я и искал )

  • Станислав
    Комментариев: 1

    Почему не указали ссылку на первоисточник? Кража материала карается в сообществе фрилансеров низкой кармой! Укажите адрес на оригинальную статью.. Воровство дело крайне неблагодарное.

    • Виталий
      Комментариев: 267

      Первоисточник чего? Найдите мне прелоадер, чтобы совпадал с моим на 100%. И разметка и стили и сам скрипт?

      По вашему все мебельщики должны указывать на первого создателя табуретки, при изготовлении своих изделий?
      Я нашел в свободном доступе скрипт, переделал его так как мне нравится, так как нравится другим, написал свою уникальнцую статью, добавил примеров и готовых анимаций. Но, нашелся ЯЖСПРАВЕДЛИВЫЙФРИЛАНСЕР , который даже почту испугался свою написать и нагадил на моем ресурсе 🙂 Кого карма по жизни и долбит, так это вас Стасик, если это ваше настоящее имя 🙂

  • Виталий Охрименко
    Комментариев: 1

    Бог знает почему, но скрипт не сработал. Jquery подключена, но версия отлична от версии, предлагаемой в статье.

    • Виталий
      Комментариев: 267

      У меня разные версии библиотек на ресурсах, где он используется. Везде работает. Перепроверьте еще раз все. Может где-то спряталась ошибочка 🙂

  • Вячеслав
    Комментариев: 1

    Все супер работает. Но как убрать полосы прокрутки пока работает прелоадер?

  • Владислав
    Комментариев: 1

    Всё никак не могу понять, как этот скрипт вставить, работаю я в платформе лп, может знаете? Подскажите пожалуйста, что нужно сначала в body вставить, а что в head?

    • Виталий
      Комментариев: 267

      Проще всего, найдите в самом конце кода ЗАКРЫВАЮЩИЙ тег - </body>
      Далее перед ним, НЕ ПОСЛЕ! ПЕРЕД! Добавьте весь код с статьи. Сначала HTML потом если нужно перед библиотеку jQuery (если вы в шапке схожую библиотеку подключали, то делать этого больше не надо), далее сам скрипт. Далее в файл стилей, обычно он называется STYLE.CSS но может и иначе, нужно добавить стили. В статье есть примеры анимации, нужно скачать/сохранить себе в папку с лендингом один из них и в стилях правильно указать путь. Сложного ничего нет.

      • Владислав
        Комментариев: 1

        Виталий, мне сказали в тех поддержке , что данный скрипт не рабочий, что в нем не действуют правила по времени показа на экране.Посмотрите, как он выглядит на моём сайте http://waist-traineers.ru/

        • Виталий
          Комментариев: 267

          Скрипт не работает, потому как он не подгружает библиотеку jquery. Попробуйте скрипт прелоадера подключить в подвале перед закрывающимся тегом body

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий