Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Прелоадер для сайта.

mario512

Автор: ,
в Opencart 2.x: Загальні питання

 Share

Recommended Posts

mario512 Proficient

mario512

Опубліковано:
Опубліковано:

Добрый день. Использую данный код для показа анимации во время полной загрузки сайта caseroom.in.ua: 

<style>
#page-preloader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 100500;
}

#page-preloader .spinner {
    width: 300px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: url('/image/catalog/preloader.gif') no-repeat 50% 50%;
    margin: -200px 0 0 -150px;
    
}
</style> 
<script>
$(window).on('load', function () {
var $preloader = $('#page-preloader'),
$spinner = $preloader.find('.spinner');
setTimeout(function(){$('#page-preloader').fadeOut('slow')},2900); 
});
</script>

Проблема заключается в том, что если скорость инета по какой-либо причине страдает, анимашка играет до тех пор, пока не подгрузиться весь контент сайта. Помогите подправит скрипт, что бы он делал fadeOut('slow') если window.onload не происходит в течении четырёх секунд. 

 

Надіслати
Поділитися на інших сайтах
1

vladrein Contributor

vladrein

Опубліковано:
Опубліковано: (змінено)
В 07.05.2017 в 14:15, mario512 сказал:

Спасибо, тема закрыта!

Можно поинтересоваться кодом такого красивого прелоадера который у вас сейчас стоит?
Буду безмерно благодарен =)
p.s. Классный у Вас сайт ! )

Змінено користувачем vladrein
Надіслати
Поділитися на інших сайтах

mario512 Proficient

mario512

Опубліковано:
  • Автор
Опубліковано:

vladrein, Спасибо.

В файле header.tpl по пути /template/common/ сразу после тега <head> вставляем: 

<style>
.load-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff; /* цвет фона */
  z-index: 99999;
}

.no-cssanimations .load-container .loader {
  text-indent: 0;
  text-align: center;
  color: #fff;
  font-size: 17px;
  background: none;
  border: 0 none;
  width: auto;
  height: auto;
  margin: 1em auto;
  overflow: visible;
  box-shadow: none;
  -webkit-animation: none;
  animation: none;
}

.no-cssanimations .load-container .loader:before,
.no-cssanimations .load-container .loader:after {
  display: none;
}

.load8 .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4.3em;
  margin-top: -4.3em;
  font-size: 8px;
  text-indent: -9999em;
  border-top: 0.3em solid rgba(244, 128, 0, 0.96); /*цвет крутяшки*/
  border-right: 0.3em solid rgba(244, 128, 0, 0.96); /*цвет крутяшки*/
  border-bottom: 0.3em solid rgba(244, 128, 0, 0.96); /*цвет крутяшки*/
  border-left: 0.3em solid #fff;
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;

  }
.spinner {
    width: 150px; /*положение графики*/
    height: 250px;
    position: absolute;
    left: 50%;
    top: 52%;
    background: url('/image/catalog/preloader.svg') no-repeat 50% 50%; /*ваш текст или гифка (желательно использовать svg)*/
    margin: -125px 0 0 -75px;
     
}

.load8 .loader, .load8 .loader:after {
  border-radius: 50%;
  width: 8em;
  height: 8em;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>

После строки <body class="<?php echo $class; ?>">

вставляем: 

<div class="load-container load8">
  <div class="loader">Loading...</div>
  <div class="spinner"></div>
</div>

Затем перед закрывающим тегом  </header>

вставляем скрипт: 

<script>
  $(window).load(function () {
      $(".load-container").delay(100).fadeOut(400);
  });
</script>

Все. Но данный прелоадер не работает без jquery. Убедитесь в том что у вас есть данная строка:

<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>

З.Ы. Решение нашел на просторах инета, запилил под себя.

  • +1 3
Надіслати
Поділитися на інших сайтах
1

  • 2 weeks later...
vladrein Contributor

vladrein

Опубліковано:
Опубліковано: (змінено)
В 17.05.2017 в 11:58, mario512 сказал:
Скрытый текст

 

vladrein, Спасибо.

В файле header.tpl по пути /template/common/ сразу после тега <head> вставляем: 



<style>
.load-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff; /* цвет фона */
  z-index: 99999;
}

.no-cssanimations .load-container .loader {
  text-indent: 0;
  text-align: center;
  color: #fff;
  font-size: 17px;
  background: none;
  border: 0 none;
  width: auto;
  height: auto;
  margin: 1em auto;
  overflow: visible;
  box-shadow: none;
  -webkit-animation: none;
  animation: none;
}

.no-cssanimations .load-container .loader:before,
.no-cssanimations .load-container .loader:after {
  display: none;
}

.load8 .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4.3em;
  margin-top: -4.3em;
  font-size: 8px;
  text-indent: -9999em;
  border-top: 0.3em solid rgba(244, 128, 0, 0.96); /*цвет крутяшки*/
  border-right: 0.3em solid rgba(244, 128, 0, 0.96); /*цвет крутяшки*/
  border-bottom: 0.3em solid rgba(244, 128, 0, 0.96); /*цвет крутяшки*/
  border-left: 0.3em solid #fff;
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;

  }
.spinner {
    width: 150px; /*положение графики*/
    height: 250px;
    position: absolute;
    left: 50%;
    top: 52%;
    background: url('/image/catalog/preloader.svg') no-repeat 50% 50%; /*ваш текст или гифка (желательно использовать svg)*/
    margin: -125px 0 0 -75px;
     
}

.load8 .loader, .load8 .loader:after {
  border-radius: 50%;
  width: 8em;
  height: 8em;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>

После строки <body class="<?php echo $class; ?>">

вставляем: 



<div class="load-container load8">
  <div class="loader">Loading...</div>
  <div class="spinner"></div>
</div>

Затем перед закрывающим тегом  </header>

вставляем скрипт: 



<script>
  $(window).load(function () {
      $(".load-container").delay(100).fadeOut(400);
  });
</script>

Все. Но данный прелоадер не работает без jquery. Убедитесь в том что у вас есть данная строка:

<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>

З.Ы. Решение нашел на просторах инета, запилил под себя.

 

 


Спасибо, очень выручили.

 

Змінено користувачем vladrein
Надіслати
Поділитися на інших сайтах

  • 9 months later...
mario512 Proficient

mario512

Опубліковано:
  • Автор
Опубліковано:
В 17.05.2017 в 11:58, mario512 сказал:

Затем перед закрывающим тегом  </header>

вставляем скрипт: 


<script>
  $(window).load(function () {
      $(".load-container").delay(100).fadeOut(400);
  });
</script>

Все. Но данный прелоадер не работает без jquery. Убедитесь в том что у вас есть данная строка:

<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>

З.Ы. Решение нашел на просторах инета, запилил под себя.

Подправил скрипт для более быстрой загрузки через мобильный интернет: 

<script>
  $(window).ready(function () {
      $(".load-container").delay(50).fadeOut(250);
  });
</script>

 

Надіслати
Поділитися на інших сайтах
1

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду