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块的最后一行。

另外，由于我对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>

Answer 2

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

无需先使用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>

Answer 3

删除图像的style="display:none"，以便默认显示图像。其他人告诉你先打电话给show()，但完全没必要。 您不需要使用JavaScript来初始显示图片;只需让它自己显示。然后，在经过5秒后将其删除：

<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);  // 5 seconds
</script>

Answer 4

你试过window.onload吗？

有些事情：

<body onload="show();">
..snip
</body>

Answer 5

在<body>

之后立即行动

<div id="myDiv"><img id="myImage" src="images/ajax-loader.gif"></div>
<script>
    setTimeout('document.getElementById("myDiv").style.display="none"', 5000);  // 5 seconds
</script>

Answer 6

将window.onload = show;添加到脚本的末尾，并在页面加载完成后立即显示加载程序。当用户打开页面时，您会希望将此事件用于您想要执行的任何操作，因为它会在尝试操作页面上的元素之前确保整个页面可用。

Answer 7

正在为一个项目寻找与此类似的东西，但没有使用图像，而是使用CSS，HTML和一些js。使用的页面是纯页面，仅用于通过加载程序。网站建立在Bootstrap 3.3.7上

<!-- JS - Place in Head Tags -->
<SCRIPT LANGUAGE="JavaScript"><!--
/* Countdown seconds */
var count = 5;
/* Web Page to redirect with Linked PHP/Bootstrap Alert Box */
var url = "index.php?s=1";
/* Call function at specific intervals */
var countdown = setInterval(function() { 
    /* Display Countdown with txt */
    $('#displayTimer').text("Redirection in: " + count-- + " seconds");
    /* If count is smaller than 0 ...*/
    if (count < 0) {
        $('#displayTimer').text("Redirecting now....");
        /* Clear timer set with setInterval */
        clearInterval(countdown);
        /* Redirect */
        $(location).attr("href", url);
   } 
    // milliseconds
}, 1000);
</SCRIPT>
<!-- JS - Place in Head Tags -->

/*Loader CSS */
#circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	width: 150px;
    height: 150px;	
}
.loader {
    width: calc(100% - 0px);
	height: calc(100% - 0px);
	border: 8px solid #162534;
	border-top: 8px solid #09f;
	border-radius: 50%;
	animation: rotate 5s linear infinite;
}
@keyframes rotate {
100% {transform: rotate(360deg);}
}
/*Loader CSS */

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Loader Code - 4 Circles - Place In Body -->
<div id="circle">
  <div class="loader">
    <div class="loader">
        <div class="loader">
           <div class="loader">

           </div>
        </div>
    </div>
  </div>
</div>
<!-- Loader Code - 4 Circles -->

代码给出4个带有旋转条的圆，一个在另一个圆内

使用时不显示错误

自动显示加载gif 5秒

7 个答案: