БЛОГ НА HUSL


Как сделать что бы прелоадер пропадал после загрузки страницы

Автор вопроса: Danil Verbicay 
$(window).on('load', function () {
var $preloader = $('#page-preloader'),
    $spinner   = $preloader.find('.spinner');
$spinner.fadeOut();
$preloader.delay(350).fadeOut('slow');
});

Весь код:

$(window).on('load', function() {
  var $preloader = $('#page-preloader'),
    $spinner = $preloader.find('.spinner');
  $spinner.fadeOut();
  $preloader.delay(350).fadeOut('slow');
});
html {
  background-color: black;
  margin: 0 auto;
  overflow-x: hidden;
}

html::-webkit-scrollbar {
  width: 0;
}


/* ie 10+ */

html {
  -ms-overflow-style: none;
}


/* фф (свойство больше не работает, других способов тоже нет)*/

html {
  overflow: -moz-scrollbars-none;
}

@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  background-color: black;
  background-position: center;
  background-repeat: repeat;
  background-size: 7%;
  background-color: black;
  transition: all 200ms linear;
}

nav {
  background-color: black
}

#page-preloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 100500;
}

#page-preloader .spinner {
  width: 500px;
  height: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: url(https://i.gifer.com/AvGt.gif) no-repeat 50% 50%;
  background-position: center;
}

.menu {
  background-color: black;
  height: 60px;
  width: 100%;
}

::selection {
  color: #fff;
  background-color: black;
}

::-moz-selection {
  color: #fff;
  background-color: black;
}

.brend {
  color: red;
  font-family: 'Do Hyeon', sans-serif;
  font-size: 21pt;
  text-decoration: none;
  display: inline-block;
  margin: 5px 5px 0px 5px;
  animation: fadeInLeft;
  /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s;
  /* don't forget to set a duration! */
}

.brend:hover {
  text-decoration: none;
  color: white;
  font-size: 21pt;
}

.li {
  color: white;
  margin: 10px 20px 20px 40px;
  font-family: 'Oswald', sans-serif;
  font-size: 16pt;
}

.li:hover {
  color: white;
  text-decoration: none;
}

.icon {
  color: white;
  font-size: 25px;
}

input[type="text"] {
  height: 45px;
  font-size: 21pt;
  display: inline-block;
  font-family: "Lato";
  font-weight: 100;
  border: none;
  outline: none;
  color: #555;
  padding: 3px;
  padding-right: 60px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}

input[type="text"]:focus:hover {
  border-bottom: 1px solid #BBB;
}

input[type="text"]:focus {
  width: 400px;
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
}

input[type="submit"] {
  height: 50px;
  width: 50px;
  display: inline-block;
  color: red;
  float: right;
  background: url(search.png) center center no-repeat;
  text-indent: -10000px;
  background-size: 35px;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  cursor: pointer;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity .4s ease;
}

input[type="submit"]:hover {
  opacity: 0.8;
}


/*main */

main {
  background-image: url(https://sun9-18.userapi.com/5Jz250YlGNjEX3rDwZ0mf4qYMrXAYMQS8E57-g/-pnUeyvIlOU.jpg);
  background-color: black;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  z-index: -9;
  background-attachment: fixed;
}

.allPH {
  width: 100%;
  pointer-events: none;
  filter: brightness(35%);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.slider {
  margin: 0 auto;
  padding: 10px;
  width: 95%;
  height: 250px;
  z-index: 99999999;
  overflow: hidden;
}

.slide {
  width: 150px;
  min-width: 8%;
  height: 90%;
  margin: 10px 30px 30px 40px;
  border: 2px solid gray;
  filter: brightness(75%);
}

.slide:hover {
  filter: brightness(100%);
}

.left {
  font-size: 35px;
  color: white;
  float: left;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 150px;
  left: 10px;
  margin: auto;
  overflow: auto;
  /*чтобы контент не расползался*/
  z-index: 99999999999999999999;
}

.right {
  font-size: 35px;
  color: white;
  float: right;
  width: 100px;
  position: absolute;
  top: 150px;
  right: -50px;
  margin: auto;
  overflow: auto;
  /*чтобы контент не расползался*/
}

.film {
  width: 100%;
  height: 1080px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.news {
  width: 100%;
}

.abs,
h2:after,
.cards .card figcaption,
.cards .card:after,
.news .card figcaption,
.news .card:after,
.news .article figcaption {
  position: absolute;
}

.rel,
h2,
h2 strong,
.cards .card,
.news .card,
.news .article {
  position: relative;
}

.fix {
  position: fixed;
}

.dfix {
  display: inline;
}

.dib {
  display: inline-block;
}

.db {
  display: block;
}

.dn {
  display: none;
}

.df,
.cards,
.news {
  display: flex;
}

.dif {
  display: inline-flex;
}

.dg {
  display: grid;
}

.dig {
  display: inline-grid;
}

.vm,
h2,
h2 strong,
h2 span {
  vertical-align: middle;
}

body {
  background: #24282f;
  font-family: 'Alegreya Sans';
}

.wrapper {
  padding: 15px;
}

h2 {
  padding: 10px;
  padding-left: 25px;
  color: #ccc;
  margin: 0;
}

h2 strong {
  z-index: 2;
  background: #24282f;
  padding: 4px 8px;
}

h2 span {
  font-size: 0.7em;
  color: #aaa;
  margin-left: 10px;
}

h2:after {
  content: '';
  z-index: 1;
  bottom: 50%;
  margin-bottom: -2px;
  height: 2px;
  left: 0;
  right: 0;
  background: #373d47;
}

.cards,
.news {
  flex-flow: row wrap;
}

.cards .card,
.news .card {
  margin: 20px;
  width: 10px;
  height: 270px;
  overflow: hidden;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
  transform-origin: center top;
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: 0.3s;
}

.cards .card img,
.news .card img {
  width: 100%;
  min-height: 100%;
}

.cards .card figcaption,
.news .card figcaption {
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  padding-bottom: 10px;
  font-size: 20px;
  background: none;
  color: #fff;
  transform: translateY(100%);
  transition: 0.3s;
}

.cards .card:after,
.news .card:after {
  content: '';
  z-index: 10;
  width: 200%;
  height: 100%;
  top: -90%;
  left: -20px;
  opacity: 0.1;
  transform: rotate(45deg);
  background: linear-gradient(to top, transparent, #fff 15%, rgba(255, 255, 255, 0.5));
  transition: 0.3s;
}

.cards .card:hover,
.news .card:hover,
.cards .card:focus,
.news .card:focus,
.cards .card:active,
.news .card:active {
  box-shadow: 0 8px 16px 3px rgba(0, 0, 0, 0.6);
  transform: translateY(-3px) scale(1.05) rotateX(15deg);
}

.cards .card:hover figcaption,
.news .card:hover figcaption,
.cards .card:focus figcaption,
.news .card:focus figcaption,
.cards .card:active figcaption,
.news .card:active figcaption {
  transform: none;
}

.cards .card:hover:after,
.news .card:hover:after,
.cards .card:focus:after,
.news .card:focus:after,
.cards .card:active:after,
.news .card:active:after {
  transform: rotate(25deg);
  top: -40%;
  opacity: 0.15;
}

.news .article {
  overflow: hidden;
  width: 340px;
  height: 500px;
  margin: 20px;
}

.news .article img {
  width: 100%;
  min-height: 100%;
  transition: 0.2s;
}

.news .article figcaption {
  font-size: 14px;
  text-shadow: 0 1px 0 rgba(51, 51, 51, 0.3);
  color: #fff;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 40px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  background: rgba(6, 18, 53, 0.6);
  opacity: 0;
  transform: scale(1.15);
  transition: 0.2s;
}

.news .article figcaption h3 {
  color: #3792e3;
  font-size: 16px;
  margin-bottom: 0;
  font-weight: bold;
}

.news .article:hover img,
.news .article:focus img,
.news .article:active img {
  filter: blur(3px);
  transform: scale(0.97);
}

.news .article:hover figcaption,
.news .article:focus figcaption,
.news .article:active figcaption {
  opacity: 1;
  transform: none;
}

@media only screen and (max-width: 1000px) {
  .film {
    width: 100%;
  }
}

@media only screen and (max-width: 991px) {
  #search {
    margin-top: 100px;
  }
  #search_submit {
    margin-top: 100px;
  }
}

@media only screen and (max-width: 765px) {
  .slide {
    margin: 10px 1px 15px 1px;
  }
  .slider {
    width: 100%;
  }
  .right {
    right: -50px;
  }
  .slider {
    margin-left: 20px;
  }
}

@media only screen and (max-width: 765px) {
  input[type="text"]:focus {
    width: 200px;
    z-index: 1;
    border-bottom: 1px solid #BBB;
    cursor: text;
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>KINOMOON</title>
  <link rel="stylesheet" href="https://raw.githubusercontent.com/itchief/how-to/master/toast/css/toast.css">
  <link rel="stylesheet" href="https://raw.githubusercontent.com/itchief/how-to/master/toast/css/toast-with-header.css">
  <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
  <meta name="viewport" content="width=devise-width, initial-scale=1.0">
  <link href="css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="csss/style.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Playfair+Display:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="icon" href="ico.png">
  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">
</head>

<body class="hidden-sn mdb-skin" data-pinterest-extension-installed="cr1.3.4" style="margin: 0">
  <div id="page-preloader"><span class="spinner"></span></div>
  <header>
    <nav class="navbar navbar-expand-lg navbar-light ">
      <div class="logo">
        <a class="brend animate__fadeInLeft" href="index.php">KINOMOON</a>
      </div>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fa fa-sort-desc icon" aria-hidden="true"></i>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="li " href="login.php">Войти</a>
          </li>
          <li class="nav-item">
            <a class="li" href="#">Закладки</a>
          </li>
          <li class="nav-item dropdown">
            <a class="dropdown-toggle li" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Категории
            </a>
            <div class="dropdown-menu " aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Биографии</a>
              <hr>
              <a class="dropdown-item" href="#">Боевик</a>
              <hr>
              <a class="dropdown-item" href="#">Вестерны</a>
              <hr>
              <a class="dropdown-item" href="#">Детективы</a>
              <hr>
              <a class="dropdown-item" href="#">Документ</a>
              <hr>
              <a class="dropdown-item" href="#">Драмы</a>
              <hr>
              <a class="dropdown-item" href="#">Исторические</a>
              <hr>
              <a class="dropdown-item" href="#">Комедии</a>
              <hr>
              <a class="dropdown-item" href="#">Криминал</a>
              <hr>
              <a class="dropdown-item" href="#">Мультфильмы</a>
              <hr>
              <a class="dropdown-item" href="#">Мюзиклы</a>
              <hr>
              <a class="dropdown-item" href="#">Приключения</a>
              <hr>
              <a class="dropdown-item" href="#">Семейные</a>
              <hr>
              <a class="dropdown-item" href="#">Cпортивные</a>
              <hr>
              <a class="dropdown-item" href="#">Триллеры</a>
              <hr>
              <a class="dropdown-item" href="#">Ужасы</a>
              <hr>
              <a class="dropdown-item" href="#">Фантастика</a>
              <hr>
              <a class="dropdown-item" href="#">Фэнтези</a>
              <hr>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Другое</a>
            </div>
          </li>

        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input id="search" name="search" type="text" placeholder="...">
          <input id="search_submit" value="Rechercher" type="submit">
        </form>
      </div>
    </nav>
  </header>
  <main>
    <div class="line1">
      <div class="table">
        <div class="slider">
          <img src="https://sun9-15.userapi.com/r-ljg652vN4RBTaBNqCe5nyDItWet1qTEWsVZQ/_dPcLNC9nXk.jpg" alt="" class="slide">
          <img src="https://sun9-64.userapi.com/6lTfq20lYNmXIigLvuierJN1ACcmvsng1pT7Uw/HZSmfG-OfVA.jpg" alt="" class="slide">
          <img src="https://sun9-24.userapi.com/CwTKwgxyUCBT6x1NivgBzdV8rqbrVGFKPYpBVg/WLHIY7h6EII.jpg" alt="" class="slide">
          <img src="https://sun9-32.userapi.com/hFDfPcxA4YRV_wBjclDIUeg2LSxa1EYUJZhqUA/VQtwtB91O8Y.jpg" alt="" class="slide">
          <img src="https://sun9-47.userapi.com/yQSYQ1fL4qBcne1DVoWlT_sG-TKaFeLmdtjixw/Lj62RkqQKrw.jpg" alt="" class="slide">
          <img src="https://sun9-75.userapi.com/rlSr7HA7bpKNWPUjdWThUSvGQvcelgKb00mezA/IkNDdgfrJ8A.jpg" alt="" class="slide">
          <img src="https://sun9-56.userapi.com/LBTSSMYiIcexcRP_Cd0NTy3C39rU_YXr1RC5Jw/UtEIR5Mbqeo.jpg" alt="" class="slide">
          <img src="https://sun9-68.userapi.com/0kGIw0KPsUWmu4ytEZBzQGmAI6rCXuvpSZcGKQ/QGfTytYycOs.jpg" alt="" class="slide">
        </div>
      </div>
    </div>
    <div class="film">
      <div class="news">

        <figure class="article">

          <img src="https://avatars.mds.yandex.net/get-zen_doc/1856484/pub_5de7bfd8f557d034e446efd1_5de7c0bcfe289100b0b4a51a/scale_1200" />

          <figcaption>

            <h3>New Item</h3>

            <p>

              In today’s update, two heads are better than one, and three heads are better than that, as the all-new Flockheart’s Gamble Arcana item for Ogre Magi makes its grand debut.

            </p>
            <a href="#">СМОТРЕТЬ</a>
          </figcaption>

        </figure>

        <figure class="article">

          <img src="https://www.startfilm.ru/images/base/film/f_148717/big_startfilmru1362680.jpg" />

          <figcaption>

            <h3>Update</h3>

            <p>

              Just in time for Lunar New Year and the Rat’s time in the cyclical place of honor, the Treasure of Unbound Majesty is now available.

            </p>
            <a href="#">СМОТРЕТЬ</a>
          </figcaption>

        </figure>

        <figure class="article">

          <img src="https://www.startfilm.ru/images/base/film/15_11_12/big_80718_f04a2e6df51bc78b22ad6da5222db33e.jpg" />

          <figcaption>

            <h3>Update</h3>

            <p>

              Just in time for Lunar New Year and the Rat’s time in the cyclical place of honor, the Treasure of Unbound Majesty is now available.

            </p>
            <a href="#">СМОТРЕТЬ</a>
          </figcaption>

        </figure>
        <figure class="article">

          <img src="https://st.kp.yandex.net/im/poster/2/6/9/kinopoisk.ru-Terminator-Genisys-2690919--o--.jpg" />

          <figcaption>

            <h3>Update</h3>

            <p>

              Just in time for Lunar New Year and the Rat’s time in the cyclical place of honor, the Treasure of Unbound Majesty is now available.

            </p>
            <a href="#">СМОТРЕТЬ</a>
          </figcaption>

        </figure>
        <figure class="article">

          <img src="https://st.kp.yandex.net/im/poster/1/0/8/kinopoisk.ru-Zombieland-1088628.jpg" />

          <figcaption>

            <h3>Update</h3>

            <p>

              Just in time for Lunar New Year and the Rat’s time in the cyclical place of honor, the Treasure of Unbound Majesty is now available.

            </p>
            <a href="#">СМОТРЕТЬ</a>
          </figcaption>

        </figure>

        <figure class="article">

          <img src="https://i.pinimg.com/736x/5d/3c/8d/5d3c8d25556303aa21786e7f630de81b.jpg" />

          <figcaption>

            <h3>New Item</h3>

            <p>

              In today’s update, two heads are better than one, and three heads are better than that, as the all-new Flockheart’s Gamble Arcana item for Ogre Magi makes its grand debut.

            </p>
            <a href="#">СМОТРЕТЬ</a>
          </figcaption>

        </figure>

        <figure class="article">

          <img src="https://media7.kinotree.ru/files/s3/ty/cd/angelyi-i-demonyi.jpg" />

          <figcaption>

            <h3>Update</h3>

            <p>

              Just in time for Lunar New Year and the Rat’s time in the cyclical place of honor, the Treasure of Unbound Majesty is now available.

            </p>
            <a href="#">СМОТРЕТЬ</a>
          </figcaption>

        </figure>

        <figure class="article">

          <img src="https://st.kp.yandex.net/im/poster/2/5/3/kinopoisk.ru-Big-Eyes-2536968--o--.jpg" />

          <figcaption>

            <h3>Update</h3>

            <p>

              Just in time for Lunar New Year and the Rat’s time in the cyclical place of honor, the Treasure of Unbound Majesty is now available.

            </p>
            <a href="#">СМОТРЕТЬ</a>
          </figcaption>

        </figure>
        <figure class="article">

          <img src="https://media7.kinotree.ru/files/s3/hd/me/medlennyij-zapad.jpg" />

          <figcaption>

            <h3>Update</h3>

            <p>

              Just in time for Lunar New Year and the Rat’s time in the cyclical place of honor, the Treasure of Unbound Majesty is now available.

            </p>
            <a href="#">СМОТРЕТЬ</a>
          </figcaption>

        </figure>
        <figure class="article">

          <img src="https://i.pinimg.com/736x/68/83/ee/6883eed696f23980c4d74e67de9fe655--mark-watney-ridley-scott.jpg" />

          <figcaption>

            <h3>Update</h3>

            <p>

              Just in time for Lunar New Year and the Rat’s time in the cyclical place of honor, the Treasure of Unbound Majesty is now available.

            </p>
            <a href="#">СМОТРЕТЬ</a>
          </figcaption>

        </figure>
      </div>

    </div>
    </div>
  </main>
  <script type="text/javascript" src="js/js.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

</html>


Источник

Ответы (1 шт):

Автор решения: OPTIMUS PRIME

В хроме, CTRL + SHIFT + I:

↓

$(window).on('load', function () {
  var $preloader = $('#page-preloader'),
      $spinner   = $preloader.find('.spinner');

  console.clear(); console.log($spinner); // ←

  $spinner.fadeOut();
  $preloader.delay(350).fadeOut('slow');
});

↓

Т.е. jQuery-объект нормально создается, но у него нет функции fadeOut ? Открыл __proto__:

И правда нет. Пора смотреть, что вы там у себя подключили... а там оказывается jQuery-slim, значит он не предоставляет fadeIn / Out.

Два варианта:

  1. Подключить обычный jQuery вместо slim https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. Написать подобие fadeOut без jQuery ( ? http://youmightnotneedjquery.com/ )
→ Ссылка

licensed under cc by-sa 3.0 with attribution.