即使页面已加载，我也需要 gif 至少等待 3 秒才能消失，有帮助吗？
var loader = document.getElementById("loader");
window.addEventListener("load", function() {
loader.style.height = "100px";
loader.style.width = "100px";
loader.style.borderRadius = "50%";
loader.style.visibility = "hidden";
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="loader">
<img src="preload.gif" width="30%"/>
</div>
<script src="script.js"></script>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</body>
</html>最佳答案
欢迎来到SO:)
在 html 代码的第一行中，输入:
<script>
const renderTimeStart = new Date();
function hidePreloader(){
// Do hiding stuff here...
const loader = document.getElementById("loader");
loader.style.visibility = "hidden";
}
function scheduleHidePreloader(renderTimeStart){
const passedTimeMilliSeconds = new Date() - renderTimeStart;
const renderAfterMilliSeconds = 3000 - passedTimeMilliSeconds;
setTimeout(hidePreloader, renderAfterMilliSeconds);
}
window.addEventListener("load", () => {
scheduleHidePreloader(renderTimeStart);
}
</script>
这样，如果在 3000 毫秒之前调用预加载器，renderAfterMilliSeconds 将计算剩余所需时间，并在超时时调用。
否则，如果超过 3000 毫秒，超时将收到负值并立即调用。
不要忘记，此代码的整个功能取决于要在 html 的第一行中(在导入任何资源之前)调用的 const renderTimeStart = new Date(); 行。
关于javascript - 如何让我的网站预加载器在消失前持续 3 秒，即使页面已加载(至少停留 3 秒)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60642234/