Question

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

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

</div>

我的javascript函数：

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

目前的解决方案允许我显示gif图像，但我真的希望它显示在原始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');
}

有关classList的更多信息（及其在此处的支持 - https://developer.mozilla.org/en-US/docs/Web/API/Element/classList）

Answer 2

我想你想要显示一个居中的GIF＆＃34;以上＆＃34; div内容。为此，absolute定位具有魅力。您首先需要一个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>

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

2 个答案: