Question

我有以下幻灯片，加载太多，因为图像太大而我想在幻灯片完全加载之前显示加载程序。这是我的滑块：

<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，您可以在加载 DOM 时使用$(document).ready()执行某些操作，并在加载所有其他内容时使用$(window).on("load", handler)执行某些操作，例如图像。

修改

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

＆＃13;
＆＃13;
$(window).on("load", function() { $('#loaderContainer').hide(); console.log("loader hide"); // delete this, it's just a sample to show thats loaded. });
＆＃13;
#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); } }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <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">  <div id="loaderContainer"> <div class="loader"></div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

你可以这样做

HTML -

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

CSS -

#load {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 30;
}
.loader {
    /*add positioning if necessary*/
    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); }
}

JQuery -

$(window).on("load", function() {  
    $("#load").fadeOut("slow");
});

希望这有帮助。

Answer 3

您可以在回调中创建图像对象并隐藏加载器

// Show Loader by default.
var img1 = new Image();
img1.src = "Your Image Url";
img1.onload = function() {
  console.log('image loaded');
  // hide loader here
}

Answer 4

在元素中添加一个加载器图片，ID为'loader_img'，其中slide_img是每个幻灯片图像

// show loading image
$('#loader_img').show();

// slide image loaded ?
$('#slide_img').on('load', function(){
  // hide/remove the loading image
//if last image
  $('#loader_img').hide();
});

加载事件将有助于您的方案。希望它有所帮助。

在幻灯片完全加载之前显示加载程序

4 个答案: