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

1395

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

preloader-01

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

preloader-02

Для начала нам понадобится добавить такой код (в случае, если 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.
  • Минимум нагрузки на сайт.
  • Все изменения делаем самостоятельно.


/clml_%D0%BA%D0%BE%D0%B4%20%D0%B4%D0%BB%D1%8F%20%D0%BF%D1%80%D0%B5%D0%BB%D0%BE%D0%B0%D0%B4%D0%B5%D1%80%D0%B0.txt