Загрузчик страницы анимации звуковой волны

ProgramBox

Загрузчик страницы анимации звуковой волны

Post author:admin
Запись опубликована:4 ноября, 2022
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть загрузчик страниц, похожий на звуковую волну, но я не могу заставить его исчезнуть после загрузки страницы.

 .preload {
    z-index: 10001;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #121212;

    display: flex;
    justify-content: center;
    align-items: center;
}

.bar {
    background: #aa1515;
    bottom: 1px;
    height: 3px;
    position: relative;
    width: 3px;      
    animation: sound 0ms -800ms linear infinite alternate;
}
 
@keyframes sound {
    0% {
        opacity: .35;
        height: 3px; 
    }
    100% {
        opacity: 1;       
        height: 28px;        
    }
}

.bar:nth-child(1)  { left: 1px;  animation-duration: 474ms; }
.bar:nth-child(2)  { left: 5px;  animation-duration: 433ms; }
.bar:nth-child(3)  { left: 9px;  animation-duration: 407ms; }
.bar:nth-child(4)  { left: 13px; animation-duration: 458ms; }
.bar:nth-child(5)  { left: 17px; animation-duration: 400ms; }
.bar:nth-child(6)  { left: 21px; animation-duration: 427ms; }
.bar:nth-child(7)  { left: 25px; animation-duration: 441ms; }
.bar:nth-child(8)  { left: 29px; animation-duration: 419ms; }
.bar:nth-child(9)  { left: 33px; animation-duration: 487ms; }
.bar:nth-child(10) { left: 37px; animation-duration: 442ms; }

.preload-finish {
    opacity: 0;
    pointer-events: none;
}

 window.addEventListener('load', () => {
    const preload = document.querySelector('.preload');
    preload.classList.add('preload-finish');
});

Он появляется первым, когда что-то загружается, но не может заставить его исчезнуть после загрузки страницы.
Что я делаю не так?

1. Можете ли вы показать его html-часть?

2. Это просто <div class=»предварительная загрузка»> с 10x <div class=»bar»> внутри

3. вы пробовали .preload-finish { display: none; }

4. Да и не исправил это

Ответ №1:

Вы должны передать аргумент (e) для этого EventListener

   window.addEventListener('load',(event)=>{
   ...
   ...
  });

Если вы все еще получаете ошибку, то это потому, что некоторые файлы еще не загружены или не найдены.

Перейдите в chrome dev tools и в консоли проверьте, отображаются ли какие-либо ошибки.

Это может быть статический файл, такой как изображения, файл css и т. Д…

Кроме того, если в вашем javascript есть какие-либо ошибки, то также load событие then не сработает

Я попробовал ваш предварительный загрузчик для демонстрации 👍

 window.addEventListener('load',(e)=>{
    $("#preloader").fadeOut();
  });

 #preloader {
  position: fixed;
  z-index: 1999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background-color: #fff;
}

.bar {
    background: #aa1515;
    bottom: 1px;
    height: 3px;
    position: relative;
    width: 3px;      
    animation: sound 0ms -800ms linear infinite alternate;
}
 
@keyframes sound {
    0% {
        opacity: .35;
        height: 3px; 
    }
    100% {
        opacity: 1;       
        height: 28px;        
    }
}

.bar:nth-child(1)  { left: 1px;  animation-duration: 474ms; }
.bar:nth-child(2)  { left: 5px;  animation-duration: 433ms; }
.bar:nth-child(3)  { left: 9px;  animation-duration: 407ms; }
.bar:nth-child(4)  { left: 13px; animation-duration: 458ms; }
.bar:nth-child(5)  { left: 17px; animation-duration: 400ms; }
.bar:nth-child(6)  { left: 21px; animation-duration: 427ms; }
.bar:nth-child(7)  { left: 25px; animation-duration: 441ms; }
.bar:nth-child(8)  { left: 29px; animation-duration: 419ms; }
.bar:nth-child(9)  { left: 33px; animation-duration: 487ms; }
.bar:nth-child(10) { left: 37px; animation-duration: 442ms; }

.preload-finish {
    opacity: 0;
    pointer-events: none;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<button>h4llo </button>

Развернуть фрагмент

Ответ №2:

Хотя я не знаю точной причины, по которой это происходит на самом деле, ваше определение CSS для отдельных баров, похоже, мешает переключению .preload класса родительского контейнера на .preload-finish .

Вы можете обойти это, добавив пустое определение класса в свои бары при переключении на preloader-finish класс.

Вот пример:

 document.getElementById("clickMe").addEventListener("click", function() {
  var preload = document.querySelector('.preload');
  preload.classList.add('preload-finish');
  var bars = document.getElementsByClassName("bar");
  for (var a = bars.length - 1; a > 0; a--) {
    bars[a].classList.add('emptyBar');
  }

});

 .preload {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #121212;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bar {
  background: #aa1515;
  bottom: 1px;
  height: 3px;
  position: relative;
  width: 3px;
  animation: sound 0ms -800ms linear infinite alternate;
}

@keyframes sound {
  0% {
    opacity: .35;
    height: 3px;
  }
  100% {
    opacity: 1;
    height: 28px;
  }
}

.bar:nth-child(1) {
  left: 1px;
  animation-duration: 474ms;
}

.bar:nth-child(2) {
  left: 5px;
  animation-duration: 433ms;
}

.bar:nth-child(3) {
  left: 9px;
  animation-duration: 407ms;
}

.bar:nth-child(4) {
  left: 13px;
  animation-duration: 458ms;
}

.bar:nth-child(5) {
  left: 17px;
  animation-duration: 400ms;
}

.bar:nth-child(6) {
  left: 21px;
  animation-duration: 427ms;
}

.bar:nth-child(7) {
  left: 25px;
  animation-duration: 441ms;
}

.bar:nth-child(8) {
  left: 29px;
  animation-duration: 419ms;
}

.bar:nth-child(9) {
  left: 33px;
  animation-duration: 487ms;
}

.bar:nth-child(10) {
  left: 37px;
  animation-duration: 442ms;
}

 .emptyBar {}

.preload-finish {
  opacity: 0;
  pointer-events: none;
}

 <div class="preload">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
<button style="position:absolute" id="clickMe">click me</button>

Развернуть фрагмент