javascript - 向预加载器 gif 添加延迟

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>

它是如何工作的？

1. 如果页面加载时间少于 3 秒 - 显示加载 block 3-3.5 秒
2. 如果页面加载时间超过 3 秒(例如 4 秒) - 仅显示加载时间的加载 block (精确度为半秒)