当你第一次创建请求时，打开加载器并隐藏内容，当请求完成时关闭加载器。你可能也不想等待点击再次显示主要内容-你可以在准备好后立即显示它。

const content = document.querySelector(".content");
const loading = document.querySelector(".loading");

function loadDoc() {
  content.style.visibility = "hidden";
  loading.style.visibility = "visible";
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      loading.style.visibility = "hidden";
      content.style.visibility = "visible";
    }
  };
  xhttp.open("POST", "_ORA_DB.php", true);
  xhttp.send();
}

风格方面，选择使用vanilla DOM方法还是jQuery方法也是很好的-在一个脚本中同时使用这两种方法是很奇怪的。最好选择一个或另一个。没有任何jQuery，它看起来像上面的代码：
或者你可以使用fetch代替XMLHttpRequest。
或者，使用jQuery，您可以使用jQuery.post，并将document.querySelector(".content")替换为$('.content')，将.style.visibility = "hidden";替换为.css('visibility','hidden');（对于'visible'也是如此）。

这就是答案：

$(document).ready(function() {   $(".content").click(function() {
    $(".content").hide();
    $(".loader").show();
    loadDoc(function() {
      $(".loader").hide();
      $(".content").show();
    });   }); });

function loadDoc(callback) {   $.ajax({
    url: "../db.php",
    type: "POST",
    success: function(response) {
      $("#dbprocess").html(response);
      callback();
    },
    error: function(xhr, status, error) {
      console.log("Error: " + error);
      callback();
    }   }); }