自动显示加载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块的最后一行.

另外,由于我对全局命名空间污染敏感,我会这样做:

<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>

Answer 2

您可以display: none;从 myDiv 中删除。这样它从一开始就可见，然后在五秒钟后隐藏它。

当您希望它从头开始显示时，无需先用 CSS 隐藏它，然后再用 JavaScript 显示它。

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

<script type = "text/javascript">   
setTimeout(function(){
   document.getElementById("myDiv").style.display="none";
}, 5000);  
</script>