Плавное появление контента или прелоадер страницы

Плавное появление контента или прелоадер страницы (индикатор загрузки)

Плавное появление контента или прелоадер страницы
Студия дизайн «Движок» решила немного описать как сделать прелоадер странице или плавное появление контента. Опишем так же как загружается веб-страница любого сайта. Так же в данной статье Вы сможете увидеть полезный ресурс по созданию или подбору preloader картинок.

Как же загружается веб-страница?

1. Браузер отправляет запрос на сервер.
2. Сервер начинает отправлять браузеру html-код страницы. Специфика передачи данных в интернете такова, что код страницы браузер получает не сразу, а по частям.
3. В целях экономии времени браузер начинает обработку html-кода страницы, не дожидаясь окончания документа.
4. Как только в коде страницы браузер встречает внешний ресурс, браузер отправит на сервер запрос на получение этого ресурса. Чаще всего, если этот ресурс — javascript-файл, то дальнейшая обработка страницы прекращается до полной загрузки и выполнения javascript-кода этого файла.
5. Как только браузер полностью получил и обработал html-код страницы (обработчик достиг закрытия тега html), браузер вызывает событие DOMContentLoaded, также известное как DOM Ready.
6. Как только последний внешний ресурс загружен, браузер вызывает событие window.onload. И страница сайта полностью загружена.

browser-server-scheme

Как установить preloader картинку на сайт Opencart

1. Находим файл шаблона: /www/ВАШ САЙТ/catalog/view/theme/*/javascript/common.js и размещаем внутри файла код:

indicators load
$(window).on ('load', function () {
var $preloader = $('#page-preloader'),
$spinner = $preloader.find ('.spinner');
$spinner.fadeOut ();
$preloader.delay (350).fadeOut ('slow');
});
// END- indicators load

Так же можно этот код поместить в свой фал но тогда его нужно прописать в файле: /www/ВАШ САЙТ/catalog/view/theme/*/template/common/header.tpl
в теле , например так:
<script src="catalog/view/javascript/preload.js"></script>
в данный файл так же помещаем выше описанный код.

2. После тега после <body> (находится в файле: /www/ВАШ САЙТ/catalog/view/theme/*/template/common/header.tpl) добавляем код:
<div id="page-preloader"><span class="spinner"></span></div>

3. В файле стилей шаблона: /www/ВАШ САЙТ/catalog/view/theme/*/stylesheet/stylesheet.css — присваиваем стили:

#page-preloader {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #000;
z-index: 100500;
}

#page-preloader .spinner {
width: 32px;
height: 32px;
position: absolute;
left: 50%;
top: 50%;
background: url (.../image/load.gif) center center no-repeat;
margin: -16px 0 0 -16px;
}

Где индикатор простая gif анимация — load.gif (ее забрасываем в папку /www/ВАШ САЙТ/catalog/view/theme/*/image)

Сервис с индикаторами загрузки. Скачать индикаторы загрузки

Вот сайт по созданию или скачиванию preloader файлов: preloaders.net/ru
Вот и все, если Вы хотите «поблагодарить» наш информационный портал о веб-разработке — у вас есть такая возможность: справа есть варианты для пожертвований на развитие портала. Или поделитесь статьей в ваших соц.стеях через сервисы ниже.

Отправить ответ

Please Login to comment
Войти с помощью: 
  Subscribe  
Notify of
Authorization
*
*
Войти с помощью: 
Registration
*
*
*
Войти с помощью: 

12 + three =

Password generation