ローディングGIFを5秒間自動表示する

ユーザーがサイトにアクセスしたときに自動的にローディング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>

もし私がこれを行うことができる任意の方法、またはそれを行うためのより良い方法がある場合は、コメントをしてください。

connor.p
編集された質問 7日 11月 2018 в 4:56
プログラミング
javascript
23日 12月 2011 в 4:48
まだビューはありません
ソリューション

onclick="show()"を削除し、JavaScriptブロックの最後の行としてshow();` を追加するだけです。

また、私はグローバル名前空間汚染に敏感なので、次のようにします。

<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>
ziesemer
編集した答え 28日 9月 2016 в 2:09
解説 (8)

window.onloadは試されましたか？

というような内容で。


..snip
解説 (1)

スクリプトの最後に window.onload = show; を追加すると、ページの読み込みが終了すると同時にローダーが表示されます。 このイベントは、ページ上の要素を操作する前に、ページ全体が利用可能であることを確認するため、ユーザーがページを開いたときに行いたいことのために使用することができます。

解説 (0)