我想为预加载 gif 添加延迟。我关注了这个http://www.netavatar.co.in/2011/05/31/how-to-show-a-loading-gif-image-while-a-page-loads-using-javascript-and-css/教程并让它工作,但我想在页面加载时显示加载 gif 至少 3 秒。
谢谢你的帮助
<script type="text/javascript">// <![CDATA[
function preloader(){
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}//preloader
window.onload = preloader;
// ]]></script>
最佳答案
使用setTimeout
怎么样?
<script type="text/javascript">// <![CDATA[
function preloader(){
setTimeout(function() {
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}, 3000);
}//preloader
window.onload = preloader;
// ]]></script>
上面将显示加载时间和接下来 3 秒的加载情况。如果你想实现“显示加载至少 3 秒,但如果加载时间超过 3 秒则在加载时立即隐藏”之类的效果,可以使用:
<script type="text/javascript">// <![CDATA[
var minimumShowLoadingTimeReached = false;
setTimeout(function() {minimumShowLoadingTimeReached = true;}, 3000);
function preloader() {
if (minimumShowLoadingTimeReached) {
showContent();
} else {
setTimeout(function() {
preloader();
}, 500);
}
}
function showContent(){
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}
window.onload = preloader;
// ]]></script>
它是如何工作的?
- 如果页面加载时间少于 3 秒 - 显示加载 block 3-3.5 秒
- 如果页面加载时间超过 3 秒(例如 4 秒) - 仅显示加载时间的加载 block (精确度为半秒)
关于javascript - 向预加载器 gif 添加延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24130062/