admin管理员组文章数量:1178530
I want to display a loading gif automatically when the user goes to the website and then after 5 seconds it goes away.
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.
I want to display a loading gif automatically when the user goes to the website and then after 5 seconds it goes away.
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.
Share Improve this question edited Nov 7, 2018 at 16:56 connor.p asked Dec 23, 2011 at 16:48 connor.pconnor.p 86610 gold badges19 silver badges30 bronze badges 07 Answers
Reset to default 15Just remove the onclick="show()", and add show(); as the last line of your JavaScript block.
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>
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.
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.
<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>
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:
<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>
Have you tried window.onload?
Something along the lines of:
<body onload="show();">
..snip
</body>
Put this right after <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>
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.
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
<!-- 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
Does not show an error when in use
本文标签： javascriptDisplaying a loading gif for 5 seconds automaticallyStack Overflow
版权声明：本文标题：javascript - Displaying a loading gif for 5 seconds automatically - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738029096a2051815.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论