Как сделать загрузку javascript

Как сделать загрузку javascript

Главная Web-дизайн Прелоадер для сайта на 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 миллисекундам то есть пол секунды, можете уменьшить или наоборот увеличить если Вам это нужно.

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

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


Метки: css javascript jQuery анимация загрузка прелоадер сайт скрипт страница


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


Оцените статью
5 4 3 2 1

Проголосовало: 55, в среднем: 4.9 из 5


Предыдущая запись
Как отключить создание лишних изображений WordPress

Следующая запись
Всплывающее окно при загрузке странице показывается один раз с задержкой

Похожие записи: Красивый ползунок выбора значения. UI ползунок на сайт
Красивый ползунок выбора значения. UI ползунок на сайт Изменение, создание, всплывающих подсказок title с помощью CSS
Изменение, создание, всплывающих подсказок title с помощью CSS Фиксированная, открывающаяся, боковая панель, для меню на сайт
Фиксированная, открывающаяся, боковая панель, для меню на сайт Всплывающее, модальное окно на сайт в виде пузырьков с анимацией
Всплывающее, модальное окно на сайт в виде пузырьков с анимацией Выполнение скрипта при прокрутке до нужного места
Выполнение скрипта при прокрутке до нужного места

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


Как сделать загрузку javascript

Похожие записи:



Как сделать виндовс фон лучше

Настенные полки из гипсокартона своими руками фото

Как сделать гравировку на авторучке