X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2020-11-27
  • 83261 просмотр

    69 комментарий

  • Дизайн и разработка сайта

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

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

прелоадер

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

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

Плагины и Шаблоны для WordPress



Пример

На свой сайт или страницу подключить такой прелоадер, можно довольно не сложно. Первое что понадобится сделать для осуществления задумки, это конечно же вставить 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
Проголосовало: 84, в среднем: 4.8 из 5
Читайте также
Опубликовано 69 комментариев

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

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.