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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Работает скрипт.Все отлично.Еще бы анимация спустя какое то время к примеру 10 секунд останавливалась.

Анимация останавливается сразу же кака только загружен сайт, после чего исчезает. Если у Вас не так, значит где-то допустили ошибку.

Перерыл все прелоадеры в интернете. Да ни фига они не работают. Ваш тоже не работает. Куда только чего не вставлял, как только не менял всякие переменные. Пути к картинке тоже по-разному ставятся, либо с одиночной верхней запятой ('. '), либо в кавычках (". "), либо с точками ('../image/oval.svg'), либо еще как. НЕ РАБОТАЮТ ВАШИ ПРЕЛОАДЕРЫ (. ) господа писатели статей. Вы бы так сразу всем и писали, что ни хена у вас работать не будет, сначала изучите все языки программирования, hlml, css и т.д. и тогда. Хрень какая-то и одна замануха, чтобы у вас заказывали, если не работает. Вот и весь смысл таких статей. Для начинающих это все полная фигня, ваши писалки. >8-(

Я бы даже попытался помочь, но вы как истинный, диванный вебмастер даже почту свою побоялись оставить. Если в вашем маленьком мозгу не хватает извилин для установки простейшего прелоадера с его несколькими строками кода, то мой вам совет - бросайте вебкодинг. Вы как в том анекдоте, про бабу которой все 10 мужей морду били. Может не мужья плохи, а с мордой что-то не так? 🙂 Так и вы. Все дурачки, а я правильный. Если вы не мамин трусишка, напишите мне на почту со своего адреса и я помогу вам с прелоадером, БЕСПЛАТНО. Так же докажу, что он рабочий и вся проблема в ровности ваших рук 🙂

Всё работает, спасиб)

Здравствуйте. Уже больше года использую Ваш прелоадер. Реально работает! (кто бы чего не говорил). Вопрос нынче появился для другого моего сайта. Можно ли завершить анимацию прелоадера не после загрузки страницы, а до определенного места при загрузке html? Скажем:до div, id, или скриптика?

Вопрос снят. Спасибо. Немного скрипт доработал методом тыка + css анимация.

Прелоадеры - это анимированные изображения, представляющие процесс загрузки страницы сайта. Прелоадеры отображаются в виде фонового изображения, которое скрывает от пользователя процесс отрисовки больших изображений и других элементов сайта. Наш конструктор позволяет настраивать изображения, размеры, цвет фона прелоадеров и время загрузки. На выходе конструктор предоставляет код, который необходимо разместить на сайте. Скрипт прелоадера не требует дополнительного подключения jQuery.

Спасибо за мануал, работает все кроме анимации, но думаю что это я что-то накосячил.

Скачайте ее и укажите правильно путь к ней.

Да, все работает норм. Спасибо за мануал.

Здравствуйте спасибо за статью. Я поставил все как было написано в статье , все работает кроме анимации, можете помочь? Я е-маил оставил может вы мне сможете объяснить мою ошибку. Заранее спасибо

Здравствуйте. Скачайте анимацию себе на сайт и укажите правильно путь к ней.

я скачал анимацию и задал путь к ней background: url(images/oval.svg) center center no-repeat; но ни чего не работает , появляется только сам текст , а анимации нету. Я скачал и попробовал так же gif , который тоже не отображается . Что делать?

По вашему пути, у вас должно быть так: Лежит файл в который вы добавляете стили, рядом с ним папка images и в ней анимация oval.svg, в противном случаи работать не будет.

Парень, я тебе очень благодарен. Ты первый,кто понятно объяснил и показал. Супер! Респект!

Спасибо! Рад что моя статья была полезной для Вас! 🙂

Спасибо! Все просто и все работает.

Прелоадер отлично работает. У кого текст без анимации поменяйте строку background: url(images/oval.svg) center center no-repeat; на background: url(/images/oval.svg) center center no-repeat; У меня на одном из сайтов почему-то только так заработало. Автору большое спасибо. Очень много полезного на сайте!

Большое спасибо! У меня сайт на плавающих фреймах (увы - специфика) и все работает отлично! Хотя конфликтует с jquery.mCustomScrollbar., но в моем случае это не принципиально. Спасибо!

Виталий, спасибо за код! Трудно найти доступную информацию. Всё работает, но искажает исходный код сайта. Меняет размер шрифта в некоторых местах страницы, увеличивает межстрочные интервалы, добавляет margin, которых не было. Вы сталкивались с таким?

Здравствуйте. Посмотрите нет ли у вас в стилях названий классов, таких же как в статье. Возможно конфликт стилей.

Спасибо большое автору данной статьи! из большинства описаний установки прелоадеров на сайт, я смогу установить только этот, не с первого раза, но все же)) выглядит вот так http://www.hot-content.ru Спасибо еще раз)

Интересная особенность, как только выключаю JQuery, скрипт отрабатывает, как только навешиваю любую версию JQuery, бесконечная загрузка, фон не пропадает. Что посоветуете?

Посоветую внимательно читать статью 🙂 Это не особенность, это у вас конфликт библиотек. В статье написано, что для работы нужна JQuery. Если она НЕ ПОДКЛЮЧЕНА, то подключать по примеру из статьи. Если же она есть, то НЕ НУЖНО ее подключать. 🙂

можно ли как нибуть сделать чтобы прелоад работал не на весь экран, а на область. например галерею. ? ?

Нужно смотреть. Если заморочиться, то думаю, можно. Ограничить прелоадер блоком галереи, а не замещать его на весь экран.

Добрый день. Всё работает. Вопрос такой, как сделать фон полупрозрачным ?

Спасибо за статью. Рецепт использовал на WordPress (OpenServer). Работает. Но при этом появляется сообщение: "GET http://rti-t/images/oval.svg 404 (Not Found)" это сообщение, если используется вход с основной страницы. "http://rti-t/kontakty/images/oval.svg 404 (Not Found)" - такое сообщение, если вход с другой страницы. Весь код был загружен на page.php, сразу же после body.

Вопрос снят. Нужно было правильно прописать путь к файлу в CSS

Извините, ранее не смог ответить. Да, вы правильно решили, вам же писало, что oval.svg не найден. То есть или анимация не залита на сайт или путь не правильный.

Все отлично работает. спасибо автору за статью. всем бобра 🙂

Спасибо! Все четко работает, а у кого не работает, это из-за недостатка опыта. у меня тоже с первого запуска не заработало. Причины банальны: - нужно привязать файл стилей..у меня это main.css () - прописать путь до файла svg (вот в этой строке стилей: background: url(/images/ball-triangle.svg) center center no-repeat;)..т.е. если как тут, то нужно создать папку images, а внутрь нее загрузить ВРУЧНУЮ файл svg как то так))

Здравствуйте , у меня такая проблема текст подождите пожалуйста грузится а вот фоновый svg файл нет . Могли бы вы мне помочь , может я вам скину код сайта а вы подскажите по обстановке что куда вставлять ))

зря я беспокоил вас , просто opera не принимает svg ,а в chrome всё более ли менее норм , разве что съехала анимация слегка в бок . Не подскажите как её центрировать align и т.д не работают , или я их не там ишу ))

Уважаемая Марина, т.к автор статьи в скрипте использует синтаксис jquery, то подключение этой библиотеки необходимо) Не требует это когда скрипт пишется на голом яваскрипте. Возможно, за этот год вы об этом давно уже знаете, но должен же кто-то пояснить

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

Скажите пожалуйста, как ограничить ширину preloader до конкретного поля

Спасибо огромное за труд, получилось с первого раза!:)

Спасибо за отличную статью, это самое короткое подключение что я нашел, все понятно и работает, единственное что заметил, подтормаживает текст, который исчезает не вместе с анимацией а послеe,убрал значения внутри скобок, стало белее плавно, еще раз большое спасибо! $svg_anm.fadeOut(); $preloader.delay().fadeOut();

Здравствуйте. Отлично. Именно об этом и написано в конце статьи 🙂 Цитата: - Когда страница загрузится, блок с анимацией исчезнет и плавно появится содержимое страницы, но можно установить еще задержку. В данном скрипте она равна 500 миллисекундам то есть пол секунды, можете уменьшить или наоборот увеличить если Вам это нужно.

Cпасибо за статью. Несколько модифицировал код, так как со значением delay(3000) - не спрашивайте зачем так много,так нужно ) анимация отрабатывала всего секунду.

$(window).on('load', function ()

📎📎📎📎📎📎📎📎📎📎