Question

我想在我的ajax搜索时间中将加载图像显示为叠加div。

我的代码

<script>
function showHint(str) {
  if (str.length==0) { 
    document.getElementById("result").innerHTML="";
    return;
  }
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("result").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","search_result.php?q="+str,true);
  xmlhttp.send();
}
</script>


<input name="keyword" id="keyword" type="text" onkeyup="showHint(this.value)""/>

结果显示在此表中

<div class="table-wrapper">
    <table class="openings" id="result">

    </table>
</div>

我当前的代码在此表中正确显示，但只需要添加叠加层加载。

此外，当我搜索任何东西然后它显示正确但输入后如果我从框中删除搜索关键字，则结果区域将为空白。

Answer 1

使用普通的javascript和CSS可以做的事情如下：

**[JAVASCRIPT]**
<script type="text/javascript">

function showLoadingImage(visible){
   document.getElementById("loader").style.visibility = visible ? "visible" : "hidden";
}

function showHint(str) {
  if (str.length==0) { 
    document.getElementById("result").innerHTML="";
    return;
  }

  showLoadingImage(true);

  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("result").innerHTML=xmlhttp.responseText;
      showLoadingImage(false);
    }
  }
  xmlhttp.open("GET","search_result.php?q="+str,true);
  xmlhttp.send();
}
</script>

**CSS**
<style type="text/css">
    #loader{
       position:fixed;
       width:100%;
       height:100%;
       display:table;
       visibility:hidden;
       background-color: rgba(0,0,0.6);
    }

    #loader .inner{
       display: table-cell;
       vertical-align:middle;
    }
</style>

**[HTML]**
<div id="loader">
   <div class="inner">
      <img src="loader.gif">
   </div>
</div>

在上面的示例中执行＆＃34; showHint＆＃34;功能显示装载器div，覆盖屏幕，您的装载程序图像显示在屏幕中间。当然，您可以更改div＃loader背景颜色，并根据需要进行配置。

如何设置叠加div加载图像

1 个答案: