Question

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>

Answer 1

虽然我同意@turnip，但解决您的问题的方法是WebDriver driver; case WebDriverType.CHROME: WebDriverManager.chromedriver().setup(); ChromeOptions cOptions = new ChromeOptions(); cOptions.setCapability(CapabilityType.ACCEPT_SSL_CERTS, true); cOptions.setAcceptInsecureCerts(true); // this isthe option to run chrome in headless mode cOptions.setHeadless(true); cOptions.addArguments("--ignore-certificate-errors"); cOptions.addArguments("disable-infobars"); driver = new ChromeDriver(cOptions); break;在页面完成加载/构建之前先执行。您需要增加setTimeout，或者完全跳过页面，并在页面实际完成后执行setTimeout（效果更好）。

重叠图像上的JS SetTimeout错误

1 个答案: