javascript - 如何在处理请求时显示正在加载的 gif？

Question

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

#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;
}

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

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

但这只是在第一次加载时显示 loading.gif 和 div。我希望在处理请求时将 gif 显示为叠加层(或代替 div)，每个 div 一个。只有当状态与以前不同时，我才需要显示 gif。也就是说，如果状态从离线变为在线，反之亦然，则显示正在加载的 gif，否则只显示 div。

我需要改变什么？

Answer 1

你可以使用jquery ajax调用

//开始加载 gif $('#loading').start();

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