Question

我试图显示一个加载器div，直到返回由Ajax填充的div。所以我想隐藏一个Div＆＃34; responseDiv＆＃34;直到它被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;  
}

My Two Divs

<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（display：none）隐藏'responseDiv'并在ajax加载完成后使用jQuery更改它的状态？

Answer 2

您可以使用css选择器更改div的可见性。隐藏： $（＆＃34;＃MyDivId＆＃34;）。display = none; 显示： $（＆＃34;＃MyDivId＆＃34;）。display = block;

隐藏Ajax Div和Show Loader Div，直到返回数据

2 个答案: