jquery - How to showhide loading wheel with javascript - Stack Overflow

admin管理员组

文章数量:1415145

I have buttons on my site that load new content via ajax. I made a div to house a loading wheel for while the content is loading. On the button click function, I have it first add a class to the div to make the loading wheel appear, then load the data, then remove the loading wheel class. This doesn't seem to work. I don't see the loading wheel at all. I even tried making the js execution pause for a second before the loading wheel is removed, but i still don't see it. See the jsfiddle for a working example: /

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

    });


}

I have buttons on my site that load new content via ajax. I made a div to house a loading wheel for while the content is loading. On the button click function, I have it first add a class to the div to make the loading wheel appear, then load the data, then remove the loading wheel class. This doesn't seem to work. I don't see the loading wheel at all. I even tried making the js execution pause for a second before the loading wheel is removed, but i still don't see it. See the jsfiddle for a working example: http://jsfiddle/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();

    });


}

• javascript
• jquery
• css

Share Improve this question Follow asked Nov 1, 2017 at 6:30 user2874270user2874270 1,39222 gold badges2121 silver badges3131 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I'll suggest you to use setTimeout

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

Here's the working example

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

本文标签： jqueryHow to showhide loading wheel with javascriptStack Overflow