javascript - 隐藏 Ajax Div 并显示 Loader Div，直到返回数据

Question

我正在尝试显示加载器 div，直到返回由 Ajax 填充的 div。所以我想隐藏一个 Div“responseDiv”，直到它被 Ajax 数据填充，同时我想显示一个加载器 div。我的 CSS

#loading {
    background: url('images/loading.gif') no-repeat center center;
    position: absolute; 
    display: block;
    /*top: 0%;
    left : 0%;*/
    background-color : #ffffff ;
}

#responseDivOverlay {
position: absolute; 
background-color : #ffffff ;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;  
}

我的两个 Div

<div id="loading"></div>
<div id="responseDiv">

我的 JavaScript

我尝试显示加载器，直到 getMessage 填充响应 div 中的数据。

<!-- Slider Code-->
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
          $(function () {
              $("#slider-range").slider({
                  range: true,
                  min: <%=lowestPrice%>,
                  max: <%=highPrice%>,
                  step: 0.01,
                  values: [<%=lowestPrice%>, <%=highPrice%>],
                  stop: function (event, ui) {
                      //alert(ui.values[0] + "-" + ui.values[1]);

                      // HERE, WHAT I HAVE BEEN TRYING SO FAR

                      //setTimeout(function() {
                      //     document.getElementById("responseDiv").style.display='hide';
                      //}, 1000);

                      getMessage("1", ui.values[0], ui.values[1]);

                  },
                  slide: function (event, ui) {
                      $("#amount").val("£" + parseFloat(Math.round(ui.values[0] * 100) / 100).toFixed(2) + " - £" + parseFloat(Math.round(ui.values[1] * 100) / 100).toFixed(2));
                      //$("#amount").val("£" + ui.values[0] + " - £" + ui.values[1]);
                      //parseFloat(Math.round(num3 * 100) / 100).toFixed(2);
                  }

              });
              $("#amount").val("£" + $("#slider-range").slider("values", 0) +
          " - £" + $("#slider-range").slider("values", 1));

          });
      </script>

Answer 1

为什么不使用 css(显示:无)隐藏“responseDiv”并在 ajax 完成加载后使用 jQuery 更改它的状态？