覆盖图像上的 JS SetTimeout 错误答案

【问题标题】：JS SetTimeout faulty on overlay image覆盖图像上的 JS SetTimeout 错误
【发布时间】：2019-07-28 11:22:30
【问题描述】：

My website 在加载时显示a loading gif overlay，通过this js document 设置为在setTimeout 后消失，a CSS animation 以防js 失败。大约 10% 的时间，在 setTimeout 和 CSS 动画都过期后，重新加载页面会导致 gif 不被删除。这是怎么回事？

function on() {
    document.getElementById("loadingoverlay").style.display = "block";
}
function off() {
    document.getElementById("loadingoverlay").style.display = "none";
}
setTimeout(function() {
  off()
}, 347);
function overlay() {
    document.getElementById("overlay").style.display = "block";
}
/* var load;
(load = function(){
    overlay();
})();
*/
function unoverlay() {
    document.getElementById("overlay").style.display = "none";
}
function uc() {
  window.location.assign("https://blockheaddevdevdev--grify.repl.co/page_offline.html")
}   function home() {
  window.location.assign("https://blockheaddevdevdev--grify.repl.co/")
}

@keyframes loa {
    from {display: block; opacity: 0%; fill-opacity: 0%;}
    to {display: none; opacity: 100%; fill-opacity: 100%;}
}
@-webkit-keyframes loa {
    from {display: block; opacity: 0%; fill-opacity: 0%;}
    to {display: none; opacity: 100%; fill-opacity: 100%;}
}
#loadingoverlay {-webkit-animation-name: loa; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: loa;
  animation-duration: 1s;}

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<link href="https://blockheaddevdevdev.grify.repl.co/styles/style.css" rel="stylesheet" type="text/css" />
<link rel="prefetch" href="https://blockheaddevdevdev.grify.repl.co/assets/000.gif">
<link rel="preload" href="https://blockheaddevdevdev.grify.repl.co/assets/000.gif">
<meta charset="utf-8" />
<title>Blockhead Dev</title>
<meta name="keywords" content="blockhead,blockheaddev,dev,blockheaddevdev,devblockhead,17hrust,blockhead dev,grify,grifythegreat,grify the great" />
<meta name="description" content="Blockhead Dev Official Site. The Blockhead Dev is a small indie game and software studio. We cover all sorts of software! Check us out if you wish. Our site will always be ad-free." />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="https://www.google.com/s2/favicons?domain=https://bdfav.grify.repl.co/" type="image/x-icon" />
<link rel="SHORTCUT ICON" href="https://www.google.com/s2/favicons?domain=https://bdfav.grify.repl.co/" type="image/x-icon" />
<meta property="og:url" content="https://blockhead.dev/">
<meta property="og:title" content="The official site for the Blockhead Dev, indie game development studio!">
<meta property="og:description" content="Game studio, and software development company. Developers are always welcome!">
<meta property="og:site_name" content="Blockhead Dev">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="canonical" href="https://blockhead.dev">
</head>
<!-- <torso></torso>-->
<body class="body" id="body" bgcolor="#1C1F1E" text="white" onload="on();">
<script src="scripts/script.js"></script>
<div id="loadingoverlay" onclick="off()">
<div id="loadingimg" class="genericoverlay">
<center><img src="https://blockheaddevdevdev.grify.repl.co/assets/000.gif" alt="error loading (click to view site)" width="800" height="800" class="lo">
	</div>
	<div id="loadingtext">
	</div>
</div>
<div id="overlay"></div>
<div id="alb"><tet></tet></div>
<center>
<h4 id="albsh">ALERT!</h4>
<ul class="topnav"><li><a class="active" href="#" id="logonav"><img id="logo" src="assets/temp.png" alt="loading..."></a></li><li class="home n-h"><a class="active" href="index.html"><b>Home	</b></a></li><li class="n-s"><a href="software.html"><b>Software</b></a></li><li class="n-com"><a href="community.html"><b>Community	</b></a></li><li class="right" class="n-m"><a href="myaccount.html"><b>Account	</b></a></li><li class="right" class="n-j"><a href="login.html"><b>Join	</b></a></li>	<li class="right" class="n-d"><a href="divisions/about.html"><b>Divisions	</b></a></li><li class="right" class="n-con" class="con"><a href="contact.html"><b>Contact	</b></a></li><li class="right" class="n-ab"><a href="about.html"><b>About	</b></a></li></ul>
</center>
<b><center><font size="10" color="#FF9901">Blockhead Dev</font></b> </br>
<font size="6" color="#FF9901">Software Hub (Mostly games)</font>
</br>
</br>
<font size="6" color="#FF9901">Join the </font><a href="community.html"><font size="6" color="#ffad33">Community</font></a>
</br>
</br>
<font size="6" color="#FF9901">View some </font><a href="software.html"><font size="6" color="#ffad33">Software</font></a>
</br>
</br>
<font size="6" color="#FF9901">Publish some </font><a href="upload.html"><font size="6" color="#ffad33">Software</font></a>
</center>
</body>
</html>

【问题讨论】：

此处将相关代码显示为minimal reproducible example°
当然，加载指示器的目的是在内容加载之前一直留在屏幕上，而不是在任意硬编码的时间长度内。
@Turnip 几乎没有变种，我发现动画娱乐而不是提供信息；这样做会更加困难，并且考虑到可能不必要的小变体
@Carcigenicate 添加
您的具体宽带速度可能会略有不同。其他用户不会有同样的体验。

标签： javascript css css-animations settimeout gif

【解决方案1】：

虽然我同意@turnip，但您的问题的解决方案是setTimeout 在页面完成加载/构建之前执行。您需要增加您的setTimeout，或者完全跳过它并在页面实际完成时执行off()（更好）。

【讨论】：

当页面完成而不是设定的时间时，我将如何执行 off()？