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

Question

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.

Answer 1

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)