在页面加载时显示div上方的giv [关闭]

Well I want to show a gif image while the page is loading so I can make any action on the original div, Here is my code:

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

</div>

my javascript function:

<script>
    function display_loader()
    {
        document.getElementById('loader').innerHTML = "<img src='load.gif' alt='load'/><br/>Loading, please wait ...";
    }
</script>

The current solution allows me to display the gif image, but I really want it to display it above the original div.

HTML:

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

CSS:

#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; }

JS:

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');
}

More about classList (and its support read here - https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)

I guess you want to display a GIF centered "above" the div content. For this, absolute positioning works a charm. You first need a container with position:relative.

CSS:

.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%;
}

HTML:

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