Ajaxローダーをスライドショーに追加する方法

Question

簡単な手動スライドショーがあります。テスト1、テスト2、テスト3のテキストを読み込む前に、プレビューまたは次のボタンをクリックすると、ajaxローダー画像を追加します。 私はCSSで画像を読み込む作成し、それを

var slideIndex = 1; 
 
showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    if (n > x.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = x.length} 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
}

<div class="slider"> 
 
<button class="" onclick="plusDivs(-1)">&#10094;</button> 
 
<button class="" onclick="plusDivs(1)">&#10095;</button> 
 
    
 
<div class="mySlides">Test 1</div> 
 
<div class="mySlides">Test 2</div> 
 
<div class="mySlides">Test 3</div> 
 
</div>

Answer 1

を行うにはすべてのヘルプ！しかし、通常、画像を読み込むことは、長い応答のためにajax呼び出しで使用されます！ javascriptはクライアント言語なので、非常に高速に実行できるので、私はsetTimeoutでロードを削除してテストしました！

var slideIndex = 1; 
 
showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
    $(".loader").show(); 
 
    setTimeout(function(){ 
 
    showDivs(slideIndex += n); 
 
    },1000); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    if (n > x.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = x.length} 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    $(".loader").hide(); 
 
    x[slideIndex-1].style.display = "block"; 
 
}

.loader { 
 
    border: 16px solid #f3f3f3; /* Light grey */ 
 
    border-top: 16px solid #3498db; /* Blue */ 
 
    border-radius: 50%; 
 
    width: 120px; 
 
    display:none; 
 
    height: 120px; 
 
    animation: spin 2s linear infinite; 
 
} 
 

 
@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> 
 
<div class="slider"> 
 
<button class="" onclick="plusDivs(-1)">&#10094;</button> 
 
<button class="" onclick="plusDivs(1)">&#10095;</button> 
 
    
 
<div class="mySlides">Test 1</div> 
 
<div class="mySlides">Test 2</div> 
 
<div class="mySlides">Test 3</div> 
 
</div> 
 
<div class='loader'></div>