我想为我的网站的加载动画设置一个最小时间。
我有以下HTML代码:
<body>
<div id="preloader"></div>
<script>
var loader = document.getElementById("preloader");
window.addEventListener("load", function(){
loader.style.display = "none";
})
</script>
</body>
我需要添加什么才能将加载动画设置为至少3秒?
如果您不关心页面加载的实际时间，并且只希望动画持续至少3秒，您可以将函数包装在setTimeout中，第二个参数等于3000毫秒，如下例所示:
var loader = document.getElementById("preloader");
var dismissLoadingScreen = function() {
loader.style.display = "none";
};
var wait3seconds = function() {
// REFERENCE: https://www.w3schools.com/jsref/met_win_settimeout.asp
var result = setTimeout(dismissLoadingScreen, 3000);
};
window.addEventListener("load", wait3seconds);body {
background-color: darkblue;
}
#preloader {
background-color: green;
color: white;
height: 100vh;
width: 100%;
position: fixed;
z-index: 100;
}<body>
<div id="preloader">this is a div</div>
</body>以下是w3schools关于setTimeout的文档:https://www.w3schools.com/jsref/met_win_settimeout.asp