Question

我的网站上有按钮，可以通过ajax加载新内容。在内容加载时我制作了一个div来装载一个装载轮。在按钮单击功能上，我首先在div中添加一个类以使加载轮出现，然后加载数据，然后删除加载轮类。这似乎不起作用。我根本看不到装载轮。我甚至试图在加载轮被移除之前让js执行暂停一秒钟，但我仍然没有看到它。有关工作示例，请参阅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

我建议您使用setTimeout

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

这是工作示例

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);
    setTimeout(hide_loader, 1000);
    //hide_loader();
    event.preventDefault();
	});
}

.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>

如何使用javascript显示/隐藏加载轮

1 个答案: