Question

我之前看过几个类似的问题，但没有一个问题符合我的情况。我有两个div块，看起来像这样：

＆＃13;

#container {
  width: 800px;
  height: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  color: #fff;
}
.status {
  height: 100px;
  width: 100px;
  background: #efefef;
  margin-left: 2px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 3px;
}
.online {
  background: #8BC34A;	
}
.offline {
  background: #e53935;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">'
  <div id="loading"><img src="http://i.stack.imgur.com/KZ3Hi.gif" style="display: none;" /></div>
  <div id="user1" class="status"><span>user1</span></div>
  <div id="user2" class="status"><span>user2</span></div>
</div>

＆＃13;

result.php以下列格式返回状态：

{ "user1": "online", "user2" : "offline" }

我想在请求完成时在每个div上显示这个gif。这就是我尝试过的：

$(document).ready(function(){
    setInterval(function(){ 
        $.get("result.php", function(data){
            $('#loading').delay(3000).fadeOut();
            var obj = jQuery.parseJSON(data);
            user1_status = 'status ' +  obj['user1'];
            user2_status = 'status ' + obj['user2'];
            $("#user1").attr("class", user1_status);
            $("#user2").attr("class", user2_status);
        }); 
    }, 1000);
});

但这只是在第一次加载ALONG SIDE div时显示loading.gif。我希望gif显示为覆盖（或代替div），每个div一个，同时处理请求。只有当状态与之前的状态不同时，才需要显示gif。也就是说，如果状态从离线变为在线或反之，则显示加载gif，否则只显示div。

我需要改变什么？

Answer 1

你可以使用jquery ajax调用

//开始加载gif $（＆＃39;＃装载＆＃39）开始（）;

$.ajax({
    type: "GET",
    url: 'result.php',
    success: function(data)
    {   // loading ends
         $('#loading').fadeOut();
    },error: function (error)
    {   
        // loading ends 
        $('#loading').fadeOut();
    } 
});

如何在处理请求时显示加载gif？

1 个答案: