Показывать загрузчика до полной загрузки слайд-шоу

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, вы можете использовать $(document).ready() выполнить что-то, когда DOM загружен и $(window).on("load", handler) выполнить что-то, когда все другие вещи, которые загружены, а также, например, как изображения.

---

EDIT:

Добавлен белый фон с 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>

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(); 
}); 

load event поможет с вашей сценарий. Надеюсь, это поможет.