ローディングホイールをjavascriptで表示/非表示にする方法

Question

私のサイトには、ajaxで新しいコンテンツを読み込むボタンがあります。私はコンテンツがロードされている間、ローディングホイールを収容するdivを作った。ボタンのクリック機能では、最初にdivにクラスを追加してローディング・ホイールを表示させた後、データをロードし、ローディング・ホイール・クラスを削除します。これはうまくいかないようです。ローディング・ホイールはまったく表示されません。私はローディングホイールが取り外される前にjsの実行を1秒間中断させてみましたが、まだ表示されません。ワーキング例えばjsfiddleを参照してください：http://jsfiddle.net/g8np7qLa/

JS：

function wait(ms){ 
    var start = new Date().getTime(); 
    var end = start; 
    while(end < start + ms) { 
    end = new Date().getTime(); 
    } 
} 

function show_loader(){ 
    $("#loader").addClass("loader"); 
event.preventDefault(); 
} 


function hide_loader(){ 
    $("#loader").removeClass("loader"); 
event.preventDefault(); 
} 

if($(".item-button").length) { 


    $(".item-button").click(function(event) { 
     show_loader(); 

    //load the ajax data 
wait(1000); 
hide_loader(); 

event.preventDefault(); 

    }); 


} 

Answer 1

私はここで働い例は

function show_loader(){ 
 
\t $("#loader").addClass("loader"); 
 
    //event.preventDefault(); 
 
} 
 

 
function hide_loader(){ 
 
\t $("#loader").removeClass("loader"); 
 
    //event.preventDefault(); 
 
} 
 

 
if($(".item-button").length) { 
 
\t $(".item-button").click(function(event) { 
 
\t \t show_loader(); 
 
\t //load the ajax data 
 
    //wait(1000); 
 
    setTimeout(hide_loader, 1000); 
 
    //hide_loader(); 
 
    event.preventDefault(); 
 
\t }); 
 
}

.loader{ 
 
position:fixed; top:0; 
 
left:0; right:0; bottom:0;  
 
background:rgba(255,255,255,.8); 
 
/*padding-top:150px;*/ 
 
padding-top:20px; 
 
z-index:99999; 
 
} 
 

 
.loader div{ 
 
    border: 16px solid #f3f3f3; /* Light grey */ 
 
    border-top: 16px solid #3498db; /* Blue */ 
 
    border-radius: 50%; 
 
    width: 120px; 
 
    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.0.0/jquery.min.js"></script> 
 
<div id="loader"> 
 
    <div> 
 

 
    </div> 
 
</div> 
 
<a href="#" class="item-button" data-item-name="itemname"> 
 
click here 
 
</a>

だ setTimeout

$(".item-button").click(function(event) { 
    show_loader(); 
    //load the ajax data 
    //wait(1000); 
    setTimeout(hide_loader, 1000); 
    //hide_loader(); 
    event.preventDefault(); 
}); 

を使用するためにあなたを示唆するだろう