Эффект загрузки страницы — создание эффекта при загрузке страницы
Долго грузиться сайт? И вы не хотите чтобы человек видел как сайт загружается по частям, а хотите чтобы он видел только полностью загруженный сайт? Тогда этот урок для вас. То есть посетитель заходит на сайт и видит индикатор загрузки, по истечении которого появляется сайт с красивым переходом. Может для блогов или порталов использование такого эффекта будет только мешать посетителям, то на продающих страницах он будет весьма кстати. Скачать (необходимо будет подождать 10 секунд) и посмотреть пример вы можете по ссылкам ниже:
Смотреть примерСкачать
Ну и вот еще несколько статей о том, что можно сделать с помощью jQuery:
Эффект при загрузке страницы
В чем, собственно, суть: когда пользователь попадает на сайт, он видит перед собой серый фон, на котором изображен логотип сайта. Также он видит индикатора загрузки, который постепенно заполняется. Для индикатора загрузки используем SVG. После заполнения с помощью красивого эффекта появляется уже загруженная страница сайта, а область с логотипом плавно исчезает.
Вот страница после исчезновения индикатора загрузки:
Разметка HTML
У нас есть блок , с серым фоном, логотипом сайта и индикатором загрузки. То есть то, что пользователь видит как зашел на сайт.
Далее идет блок с классом ip-main, где находится основной контент страницы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
div id="ip-container" class="ip-container"> class="ip-header"> div class="ip-loader"> class="ip-inner" width="60px" height="60px" viewBox="0 0 80 80"> class="ip-loader-circlebg" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/> id="ip-loader-circle" class="ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/> /svg> /div> /header> div class="ip-main"> /div> /div>
А сейчас давайте это всё красиво оформим!
Стили CSS
В HTML разметке ничего сложного нет. Переходим к визуальному оформлению. В зависимости от того, какое демо вам понравилось больше, вам необходимо подключить между тегами соответствующий файл стилей (который находится в папке css ).
| effect1.css | если вам понравилось первое демо |
| effect2.css | если вам понравилось второе демо |
Ну а подключается всё это дело как обычно (если вам нравится первый эффект):
link rel="stylesheet" type="text/css" href="css/effect1.css" />
Или так (если больше понравился второй):
link rel="stylesheet" type="text/css" href="css/effect2.css" />
В начале каждого из этих файлов есть вот такие свойства:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
@font-face font-weight: normal; font-style: normal; font-family: 'Blokk'; src: url('../fonts/blokk/BLOKKRegular.eot'); src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/blokk/BLOKKRegular.woff') format('woff'), url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg'); } @font-face font-weight: normal; font-style: normal; font-family: 'feather'; src:url('../fonts/feather/feather.eot?-9jv4cc'); src:url('../fonts/feather/feather.eot?#iefix-9jv4cc') format('embedded-opentype'), url('../fonts/feather/feather.woff?-9jv4cc') format('woff'), url('../fonts/feather/feather.ttf?-9jv4cc') format('truetype'), url('../fonts/feather/feather.svg?-9jv4cc#feather') format('svg'); } Здесь вам необходимо указать пути к папке fonts , чтобы в дальнейшем работал индикатор загрузки.
Следующим свойством мы зафиксируем блок, в котором находится индикатор загрузки:
.ip-header { position: fixed; /* фиксированное позиционирование */ top: 0; /* указывая 0 (ноль), мы "прижимаем" к верху этот блок */ z-index: 100; /* позиционирование по оси Z */ min-height: 480px; /* минимальная высота блока */ width: 100%; /* ширина блока на всю ширину экрана */ height: 100%; /* высота блока на всю высоту экрана */ background: #f1f1f1; /* фоновый цвет */ }
Свойств действительно много, не буду их все описывать. Вам лишь нужно подключить файл стилей соответствующего эффекта. Вот что получается в результате:
Функциональная часть jQuery
Чтобы всё это заработало и закрутилось нужна некая «магия» 🙂 . Но к ней мы сегодня прибегать не будем, а воспользуемся лишь несколькими скриптами (classie.js, pathLoader.js и main.js), которые можно найти в папке js .
Скрипты подключаем перед закрывающим тегом :
script src="js/classie.js">/script> script src="js/pathLoader.js">/script> script src="js/main.js">/script>
Вывод
Сейчас у нас всё красиво работает и страница появляется по истечению таймера в индикаторе загрузки. Вы увидели 2 эффекта загрузки страницы и можете выбирать любой свой вкус. На продающей странице, где много изображений, видео, и я не говорю о количестве скриптов, данный способ показать посетителю заранее подгруженный сайт — очень подойдет.
Дождаться полной загрузки страницы и запустить скрипт JavaScript
Это событие запускается, когда исходный документ HTML был полностью загружен и проанализирован, не дожидаясь завершения загрузки таблиц стилей, изображений и субфреймов. На этом этапе вы можете программно оптимизировать загрузку изображений и CSS в зависимости от пользовательского устройства или скорости полосы пропускания.
Выполняется после загрузки DOM (перед img и css):
document.addEventListener("DOMContentLoaded", function( )< // . >);Code language: JavaScript (javascript)Примечание. Синхронный JavaScript приостанавливает синтаксический анализ DOM. Если вы хотите, чтобы DOM анализировался как можно быстрее после того, как пользователь запросил страницу, вы можете включить асинхронный JavaScript и оптимизировать загрузку таблиц стилей.
load
Совершенно другое событие, load, следует использовать только для обнаружения полностью загруженной страницы. Использование load там, где DOMContentLoaded было бы более подходящим, — невероятно популярная ошибка, так что будьте осторожны.
Выполняется после того, как все загружено и проанализировано:
window.addEventListener("load", function( )< // . >);Code language: JavaScript (javascript)Ресурсы MDN:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
https://developer.mozilla.org/en-US/docs/Web/Events/load
Загрузка скрипта с сервера после загрузки страницы
Иногда нам нужно загрузить скрипт с удаленного сервера. Допустим мы хотим загрузить этот скрип не сразу а через определенное время. Например сервис предоставляет нам скрипт такого вида:
script src="https://google.com/web.js" type="text/javascript" data-name="carousel" data-gallery-id="876" data-row-size="4" data-gap-size="4" data-mobile-row-size="1" data-autoplay="false" data-mobile-gap-size="1"> script> Code language: HTML, XML (xml)Мы можем обернуть этот скрипт в таймер и задать нужное нам время, через которое нужно выполниться скрипту. Так же мы вставим скрипт в нужный HTML элемент
script> document.addEventListener("DOMContentLoaded", function( )< function myTimer( )< var newA = document.createElement('script'); newA.setAttribute('src',"https://google.com/web.js"); newA.setAttribute('type',"text/javascript"); newA.setAttribute('data-name',"carousel"); newA.setAttribute('data-gallery-id',"876"); newA.setAttribute('data-row-size',"4"); newA.setAttribute('data-gap-size',"4"); newA.setAttribute('data-mobile-row-size',"1"); newA.setAttribute('data-autoplay',"false"); newA.setAttribute('data-mobile-gap-size',"1"); $('.instagram-section').find('.wrap').append(newA); > setTimeout(myTimer, 1000); >); script>Code language: HTML, XML (xml)