Прелоадер загрузки сайта или контента

Основные тезисы, которые желательно соблюдать при создании прелоадеров:

1. прелоадер не должен мешать при отображении контента

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

3. в связи со спецификой назначения, части прелоадера по возможности желательно размещать в одном файле - непосредственно в шаблоне документа. То есть, и JS код, и стили прописывать inline(в теле документа)

 

Способы реализации непосредственно анимации прелоадеров:

1. на чистом JS (JQuery)

2. на чистом CSS

3. картинки

4. смешанный стиль - JS + CSS + картинки(по желанию)

 

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

<style>  #page-preloader{  	position: absolute;  	left: 210px;  	top: 10px;  	width: 28px;  	height: 20px;  	margin: 0px 0 0 -10px;  	padding: 6px 0px;  	background: #5CBCCD;  	z-index: 100500;  }  </style>

Тут же в стилях задаем положение нашего прелоадера.

 

Отслеживание окончания загрузки документа:

Наиболее распространенным способом отслеживания окончания загрузки документа является проверка события OnLoad

код отслеживания выглядит следующим образом:

<script type="text/javascript">  $(window).on('load', function () {  	// выполняем какие либо действия  });  </script>

Событие OnLoad сработает после полной загрузки всех скриптов, стилей и картинок.

 

И непосредственно html код нашего прелоадера:

<div id="page-preloader">
<img src="/путь/до/картинки/preloader.gif" alt="загрузка">
</div>

Не забываем положить картинку прелоадера по указанному пути в теге <img>

 

Убираем все лишние пробелы и переносы строк, в итоге у нас должно получиться следующее:

<style>#page-preloader{position: absolute;left: 210px;top: 10px;width: 28px;height: 20px;margin: 0px 0 0 -10px;padding: 6px 0px;background: #5CBCCD;z-index: 100500;}</style><script>$(window).on('load', function () { var $preloader = $('#page-preloader'), $spinner   = $preloader.find('img'); $spinner.fadeOut(); $preloader.delay(100).fadeOut(100);});</script><div id="page-preloader"><img src="/путь/до/картинки/preloader.gif" alt="загрузка"></div>

Этот код мы помещаем сразу после открывающего тега <body>

Пожаловаться Подписаться
0 ответов
авторизуйтесь чтобы ответить