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

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

15

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

preloader-01

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

preloader-02

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"  type="text/javascript"></script>

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

 <!-- Preloader --> <div id="preloader">   <div id="status">&nbsp;</div> </div> <!-- Preloader end -->

Ну, и, наконец, код перед </body>:

 <!-- Preloader --> <script type="text/javascript">   //<![CDATA[     $(window).load(function() { // makes sure the whole site is loaded       $("#status").fadeOut(); // will first fade out the loading animation       $("#preloader").delay(500).fadeOut("fast"); // will fade out the white DIV that covers the website.     ])   //]]> </script>       <!-- Preloader end -->

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

Get – получить