Создание прелоадера в Joomla - специфика и установка

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

Существует несколько типов прелоадеров: флеш прелоадеры, gif и svg загрузчики. Но каким бы вы не пользовались, нужно иметь в виду размер исполняемого файла. В нашем случае мы будем вставлять gif картинку, которая будет прокручиваться во время загрузки страницы сайта, и как только она (страница) будет загружена полностью, прелоадер удалится.

Для начала нам понадобится добавить такой код (в случае, если jQuery код не установлен ранее):

Затем необходимо вставить код после тега :

Ну, и, наконец, код перед :

Не забываем поставить правило для CSS стилей в код страницы:

 /* Preloader */ #preloader {   position:fixed;   top:0;   left:0;   right:0;   bottom:0;   background-color:#fff; /* change if the mask should have another color then white */   z-index:99; /* makes sure it stays on top */   opacity: 0.7; ] #status {   width:200px;   height:200px;   position:absolute;   left:50%; /* centers the loading animation horizontally one the screen */   top:50%; /* centers the loading animation vertically one the screen */   background-image:url(../images/status.gif); /* path to your loading animation */   background-repeat:no-repeat;   background-position:center;   margin:-100px 0 0 -100px; /* is width and height divided by two */ ]

Сами исходники прелоадеров можно спокойно найти в сети. Для этого в поисковике наберите: генератор "прелоадеров".

И не забудьте, что в CSS мы прописали путь к нашему прелоадеру:

 ../images/status.gif

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

Преимущества

• Возможность установки любого понравившегося прелоадера в Joomla.
• Минимум нагрузки на сайт.
• Все изменения делаем самостоятельно.