Рекомендую!

Видеокурс: "Шаблон Joomla 2.5 от А до Я"

diskboxsmall

Научитесь создавать свои собственные уникальные и профессиональные шаблоны для Joomla 2.5!

Добро пожаловать в школу Джумла!

Вы находитесь в центре обучения работы с Джумлой, одной из наиболее мощных, простых и бесплатных систем управления содержимым сайта на планете. Не важно, новичок Вы в использовании этой CMS или профессионал, Школа Джумлы откроет Вам много новых, интересных уроков и советов в видео и текстовом формате по работе с этой системой управления сайтом.  Подробнее...

ЗАГРУЗИТЬ СТАБИЛЬНУЮ ВЕРСИЮ ДЖУМЛА

Добавляем прелоадер на сайт Joomla

прелоадер joomlaЗдравствуйте, друзья. Сегодня в видеоуроке я Вам покажу, как добавить эффект прелоадера на сайт, функционирующий на Joomla. Прелоадер (preloader) - предзагрузчик предназначен информировать посетителя о процессе загрузки основного проекта и занимает его внимание на это время. Изучив данный видеоурок, вы легко сможете добавить такой прелоадер на свой сайт. Скоре приступайте к просмотру видеоурока!

Видеоурок. Добавляем прелоадер на сайт Joomla.

Код подключения библиотеки jQuery:

<script src="http://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 */
}

Рисунок прелоадера находится во вложениях к данной статье.

Ссылки на генераторы прелоадеров:

http://preloaders.net/ru/

http://www.ajaxload.info/

http://www.loadinfo.net/

Рекомендую!

Новые комментарии

  • а зачем такие сложности? если можно в шаблон вставить счетчик. Подробнее...  
  • Доброго времени суток! а возможно ли сделать прелоадер как на этом сайте https://www.hitsan.ua За ... Подробнее...  
  • А в каком файле joomla нужно изменить код для подключения библиотеки Подробнее...  
  • Спасибо большое! Всё гениальное просто! :) Подробнее...  
  • Вот аналог для Joomla 3/ ... Подробнее...