Плавное появление контента или прелоадер страницы (индикатор загрузки)
- Stats: 14695 0
- Author: admin
- Category: CMS Opencart, jQuery, Дизайн, Статті
- Comments: Комментариев нет
Студия дизайн «Движок» решила немного описать как сделать прелоадер странице или плавное появление контента. Опишем так же как загружается веб-страница любого сайта. Так же в данной статье Вы сможете увидеть полезный ресурс по созданию или подбору preloader картинок.
Как же загружается веб-страница?
1. Браузер отправляет запрос на сервер.
2. Сервер начинает отправлять браузеру html-код страницы. Специфика передачи данных в интернете такова, что код страницы браузер получает не сразу, а по частям.
3. В целях экономии времени браузер начинает обработку html-кода страницы, не дожидаясь окончания документа.
4. Как только в коде страницы браузер встречает внешний ресурс, браузер отправит на сервер запрос на получение этого ресурса. Чаще всего, если этот ресурс — javascript-файл, то дальнейшая обработка страницы прекращается до полной загрузки и выполнения javascript-кода этого файла.
5. Как только браузер полностью получил и обработал html-код страницы (обработчик достиг закрытия тега html), браузер вызывает событие DOMContentLoaded, также известное как DOM Ready.
6. Как только последний внешний ресурс загружен, браузер вызывает событие window.onload. И страница сайта полностью загружена.
Как установить 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
Вот и все, если Вы хотите «поблагодарить» наш информационный портал о веб-разработке — у вас есть такая возможность: справа есть варианты для пожертвований на развитие портала. Или поделитесь статьей в ваших соц.стеях через сервисы ниже.
Отправить ответ