Javascript 自动显示加载 gif 5 秒
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8618570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying a loading gif for 5 seconds automatically
提问by connor.p
I want to display a loading gif automatically when the user goes to the website and then after 5 seconds it goes away.
我想在用户访问网站时自动显示加载 gif，然后在 5 秒后消失。
I found this script which does what I want, but it does not do it automatically. The user needs to click on the button to start it which kind of defeats the purpose.
我发现这个脚本可以做我想要的，但它不会自动执行。用户需要点击按钮来启动它，这违背了目的。
<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>
If there is any way in which I can do this, or if there is a better way of doing it please just comment.
如果有任何方法可以做到这一点，或者有更好的方法，请发表评论。
回答by ziesemer
Just remove the onclick="show()", and add show();as the last line of your JavaScript block.
只需删除onclick="show()", 并将其添加show();为 JavaScript 块的最后一行。
Also, as I'm sensitive to global namespace pollution, I'd do it like this:
另外，由于我对全局命名空间污染很敏感，我会这样做：
<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>
回答by Christofer Eliasson
You can just remove the display: none;from myDiv. That way it will be visible from the beginning, and then you hide it after five seconds.
您可以display: none;从 myDiv 中删除。这样它从一开始就可见，然后在五秒钟后隐藏它。
There is no need to first hide it with CSS, and then display it with JavaScript, when you want it to show up from the beginning.
当您希望它从头开始显示时，无需先用 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>
回答by Wayne
Get rid of the image's style="display:none"so that the image appears by default. Others are telling you to call show()first, but that's completely unnecessary. You don't need to use JavaScript to initially show the image; just let it display on its own.Then, remove it after 5 seconds have passed:
删除图像，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>
回答by Mike Clark
Have you tried window.onload?
你试过 window.onload 吗？
Something along the lines of:
类似的东西：
<body onload="show();">
..snip
</body>
回答by Rick Smith
Put this right after <body>
把这个放在后面 <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>
回答by Hal
Add window.onload = show;to the end of your script and it will show the loader as soon as the page has finished loading. You'll want to use this event for anything you want to do when the user opens the page, as it makes sure the entire page is available before trying to manipulate elements on the page.
添加window.onload = show;到脚本的末尾，它会在页面加载完成后立即显示加载器。当用户打开页面时，您将希望将此事件用于您想做的任何事情，因为它确保在尝试操作页面上的元素之前整个页面都可用。
回答by Venomage
Was looking for something similar to this recently for a project but not using an image, using css, html and a bit of js. The page used was dummy page used purely for a pass through loader. Site is build on Bootstrap 3.3.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 -->Code gives 4 Circles with a rotating bar one inside the other
代码给出了 4 个圆圈，其中一个旋转条位于另一个圆圈内
Does not show an error when in use
使用时不显示错误
