JS SetTimeout неисправен на оверлейном изображении - PullRequest
Новая
       25

JS SetTimeout неисправен на оверлейном изображении

0 голосов
/ 06 марта 2019

Мой веб-сайт имеет оверлей загрузки gif , отображаемый во время загрузки, который устанавливается через этот js-документ , чтобы уйти после setTimeout, с CSS анимация в случае сбоя js. Примерно в 10% случаев перезагрузка страницы приведет к тому, что gif не будет удален после того, как истечет анимация setTimeout и CSS. Что здесь происходит? 

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>

1 Ответ

0 голосов
/ 06 марта 2019

Хотя я согласен с @turnip, решение вашей проблемы заключается в том, что setTimeout выполняет до загрузки страницы / сборки. Вам нужно либо увеличить setTimeout, либо вообще пропустить его и выполнить off(), когда страница действительно будет готова (гораздо лучше).

...