Question

我想为预加载器gif添加延迟。我按照这个http://www.netavatar.co.in/2011/05/31/how-to-show-a-loading-gif-image-while-a-page-loads-using-javascript-and-css/教程开始工作，但是我想在页面加载时显示加载gif至少3秒。

谢谢你的帮助

<script type="text/javascript">// <![CDATA[
        function preloader(){
            document.getElementById("loading").style.display = "none";
            document.getElementById("content").style.display = "block";
        }//preloader
        window.onload = preloader;
// ]]></script>

Answer 1

如何使用setTimeout？

 <script type="text/javascript">// <![CDATA[
    function preloader(){
        setTimeout(function() {
          document.getElementById("loading").style.display = "none";
          document.getElementById("content").style.display = "block";
        }, 3000);
    }//preloader
    window.onload = preloader;
 // ]]></script>

上面将显示加载时间和接下来3秒的加载。如果您希望实现“显示加载至少3秒，但加载时间超过3秒时立即隐藏”，则可以使用：

<script type="text/javascript">// <![CDATA[
    var minimumShowLoadingTimeReached = false;
    setTimeout(function() {minimumShowLoadingTimeReached = true;}, 3000);

    function preloader() {
      if (minimumShowLoadingTimeReached) {
          showContent();
      } else {
          setTimeout(function() {
            preloader();
          }, 500);
      }
    }

    function showContent(){
        document.getElementById("loading").style.display = "none";
        document.getElementById("content").style.display = "block";
    }
    window.onload = preloader;
// ]]></script>

它如何运作？

如果页面加载时间少于3秒 - 显示加载块3-3.5秒
如果页面加载时间超过3秒（例如4秒钟） - 只显示加载时间（精确度为半秒）

Answer 2

<script type="text/javascript">// <![CDATA[
  function preloader(secs){
    if (secs >= 3) {
      document.getElementById("loading").style.display = "none";
      document.getElementById("content").style.display = "block";
    } else {
      setTimeout(function(){preloader(secs+1);},1000);
    }
  }
  window.onload = preloader(0);
// ]]></script>

这会在调用preloader（）时发送一个数字（秒数）。
在预加载器中，if子句检查该号码是否已达到＆＃39; 3＆＃39;。
如果没有，preloader（）会在超时（1000ms）后再次调用。
当＆＃39;＆＃39;＆＃39;已经达到3，代码隐藏加载器并显示内容被执行。

向预加载器gif添加延迟

2 个答案: