javascript - 显示加载程序直到幻灯片完全加载

Question

我有以下幻灯片，加载时间过长，因为图像太大，所以我想在幻灯片完全加载之前显示一个加载程序。这是我的 slider :

<div class="slideshow-container" >



<div class="mySlides fade">
    <div class="numbertext">3 / 1</div>
  <img src="Images/Poze galerie/1.jpg" style="width:100%">
</div>

<div class="mySlides fade">
    <div class="numbertext">3 / 2</div>
  <img src="Images/Poze galerie/2.jpg" style="width:100%">
</div>

<div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
  <img src="Images/Poze galerie/7.jpg" style="width:100%">
</div>


<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

</div>

 <div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>

</div>

<script src="Styles/SlideSow.js"></script>

我想添加这个加载器:

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div class="loader"></div>

我如何使用 javascript 做到这一点？

Answer 1

这是一个片段。也许这对您有帮助。

使用 jQuery，您可以使用 $(document).ready() 在加载 DOM 和 $(window).on( "load", handler) 在加载所有其他内容(例如图像)时执行某些操作。

---

编辑:

添加了透明度为 0.05 的白色背景。

$(window).on("load", function() {
  $('#loaderContainer').hide();
  console.log("loader hide"); // delete this, it's just a sample to show thats loaded.
});

#loaderContainer {
  background-color: rgba(255, 255, 255, 0.95); /* adjust the 0.95 for transparency */
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  margin: 20% auto 0; /* Adjust the 20% to move the loader up or down. */
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Slideshow here -->
<img src="http://placehold.it/3000x3000" style="width:50px">
<img src="http://placehold.it/3100x3000" style="width:50px">
<img src="http://placehold.it/3200x3000" style="width:50px">
<img src="http://placehold.it/3300x3000" style="width:50px">
<img src="http://placehold.it/3400x3000" style="width:50px">
<img src="http://placehold.it/3500x3000" style="width:50px">
<img src="http://placehold.it/3600x3000" style="width:50px">
<img src="http://placehold.it/3700x3000" style="width:50px">
<img src="http://placehold.it/3800x3000" style="width:50px">
<img src="http://placehold.it/3900x3000" style="width:50px">
<img src="http://placehold.it/7900x3000" style="width:50px">
<img src="http://placehold.it/7900x7000" style="width:50px">
<!-- Slideshow above -->

<div id="loaderContainer">
  <div class="loader"></div>
</div>