我以前看过几个类似的问题，没有一个符合我的情况。我有两个div块，像这样:
#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="https://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。
我需要改变什么?
可以使用jquery调用ajax
//开始加载GIF$(" #加载").start ();
$.ajax({
type: "GET",
url: 'result.php',
success: function(data)
{ // loading ends
$('#loading').fadeOut();
},error: function (error)
{
// loading ends
$('#loading').fadeOut();
}
});