javascript - 自动显示加载 gif 5 秒

Question

我想在用户访问网站时自动显示一个正在加载的 gif，然后在 5 秒后消失。

我发现这个脚本可以执行我想要的操作，但它不会自动执行。用户需要单击按钮才能启动它，这违背了目的。

<input type = "button" value = "Show image for 5 seconds" onclick = "show()"><br><br>
<div id = "myDiv" style="display:none"><img id = "myImage" src = "images/ajax-loader.gif"></div><br>

<script type = "text/javascript">

function show() {
    document.getElementById("myDiv").style.display="block";
    setTimeout("hide()", 5000);  // 5 seconds
}

function hide() {
    document.getElementById("myDiv").style.display="none";
}

</script>

如果有任何方法可以做到这一点，或者如果有更好的方法，请发表评论。

Answer 1

只需删除 onclick="show()"，并添加 show(); 作为 JavaScript block 的最后一行。

此外，因为我对 global namespace pollution 很敏感，我会这样做:

<script type="text/javascript">

  (function(){
    var myDiv = document.getElementById("myDiv"),

      show = function(){
        myDiv.style.display = "block";
        setTimeout(hide, 5000); // 5 seconds
      },

      hide = function(){
        myDiv.style.display = "none";
      };

    show();
  })();

</script>