Как добавить загрузочный GIF-файл preloader на мой сайт - PullRequest
Новая
       10

Как добавить загрузочный GIF-файл preloader на мой сайт

0 голосов
/ 19 сентября 2018

Мне нравится добавлять preloader с загрузкой gif не более чем за 5 секунд до загрузки моего сайта.Я перепробовал много методов, но это не работает, ребята, пожалуйста, помогите мне с этим?Ссылка: https://www.itchotels.in/ Вот так.Заранее спасибо

1 Ответ

0 голосов
/ 19 сентября 2018

Попробуйте это ... 

$(window).on('load', function() { // makes sure the whole site is loaded 
  $('#status').fadeOut(); // will first fade out the loading animation 
  $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website. 
  $('body').delay(350).css({'overflow':'visible'});
})
body {
  overflow: hidden;
}


/* 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 */
}

#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(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/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 */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Preloader -->
<div id="preloader">
  <div id="status">&nbsp;</div>
</div>

<img width="100%" src='https://unsplash.it/3000/3000/?random' />
...