我目前正在创建一个网站。 我为post创建了一个edit按钮，当按下编辑的save按钮时，我对一个页面执行AJAX请求，相应地更新数据库。 虽然这工作得很好，我认为一个加载图标将是非常好的。 所以我创建了这个加载图标:

echo "<div id=\"loading-cover\" class=\"loadback\"><img style=\"position: relative; top: 25%; display: block; margin: auto auto;\" src=\"/loading.gif\"></div>";
   

visibility属性被设置为从style.css中隐藏

每当我要发送AJAX请求时，我将它设置回可见。 下面是我保存编辑的代码:

function saveEdit(postid){
var loading = document.getElementById("loading-cover");
loading.style.visibility = "visible";
var x = document.getElementById("desc-" + postid );
x.setAttribute("contenteditable", false);
x.classList.remove("active-editpart");
document.getElementById("editbtn-"+postid).classList.add("savebtn-active");
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === XMLHttpRequest.DONE) {
loading.style.opacity = "0";

loading.style.visibility = "hidden";
}};
//xhr.open('GET', '/editpost.php?postid='+postid+'&editeddata='+x.innerHTML);
xhr.open('GET', '/editpost.php?postid='+postid+'&editeddata='+x.innerText);
xhr.send();
x.innerHTML = x.innerText;
document.getElementById("desc-raw-" + postid ).innerHTML = x.innerText;
}

当我在页面上和编辑一个帖子，这是完美的工作。 弹出一个加载图标并离开。 但是，如果我尝试编辑另一篇文章，它会发送AJAX请求，但是loading图标不会显示。