Javascript 加载页面时在div上方显示giv

我想在加载页面时显示gif图像，这样我就可以对原始div执行任何操作， 这是我的密码：

<?php
echo"<input type='submit' value='Rechercher' name='rechercher'  id='submit' onclick='display_loader()'/>";
?>
<div id="loader">

</div>

HTML：

JS:

更多关于classList（及其支持，请阅读此处-）
我想您应该在div内容上方以GIF为中心显示。因此，
absolute
定位非常有魅力。首先需要一个带有
位置：relative
的容器

CSS:

HTML:


原始div在哪里？在加载器舱下面？我想你还没有得到我需要的。事实上，我想在div的正上方显示gif，其中包含内容
<script>
    function display_loader()
    {
        document.getElementById('loader').innerHTML = "<img src='load.gif' alt='load'/><br/>Loading, please wait ...";
    }
</script>

 <div id="loader" class="visible">
      <img src='load.gif' alt='load'/><br/>Loading, please wait ...
 </div>

#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 999;
}

#loader img {
    // position of your image on the screen
}

.hidden { display: none; }
.visible{ display: block; }

var loader = document.getElementById('#loader');

function showLoader() {
    loader.classList.remove('hidden');
    loader.classList.add('visible');
}

function hideLoader() {
    loader.classList.remove('visible');
    loader.classList.add('hidden');
}

.container {
  position: relative;
}

.loader {
  position: absolute;
  width: 32px; height: 32px; /* set these to your GIF size */
  margin: -16px; /* half of width and height */
  left: 50%;
  top: 50%;
}

<div class="container">
  <img class="loader" src="loader.gif" />
  <!-- div or other content can go here -->
</div>