I have a website that has a-lot of elements and loads quite slowly http://www.uberdice.com. I was looking for a way to have a loading page that specifies the page is loading, as this is more pleasing than just a white page.
A desired example would be http://primedice.com.
I have searched around but none of the suggested examples have seemed to work, or I am just putting them in the wrong place.
I created this div:
<div id="loading" style="width: 100%;
height: 100%;
background: black;
background-attachment: fixed;
background-position: top;
background-size: 100% 100%;
position: absolute;
color: white;">Loading! Please calm down guy...</div>
Which I was going to use as the loading page and this script to disable it.
<script type="text/javascript">
document.getElementById("loading").style.display = "none";
</script>
However when I implemented this, it still gave me a white screen and I saw the 'loading' div briefly blink up a few ms before the full site loaded. I don't think the server is slow as the ping is normal and https://uberdice.com/test.php loads quickly.
Can anyone provide any solutions?
This is the current index.php file:
<div id="loading" style="width: 100%;
height: 100%;
background: black;
background-attachment: fixed;
background-position: top;
background-size: 100% 100%;
position: absolute;
color: white;">Loading! Please calm down guy...</div>
<?php
header('X-Frame-Options: DENY');
$init=true;
include './inc/start.php';
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $settings['title'].' - '.$settings['description']; ?></title>
<meta name="Keywords" content=“Dogecoin, Dice, Bets, Betting”>
<meta name="Description" content=“Exclusive Dogecoin Dice Site - 50% of ALL profits go back into Dogecoin development. In association with forum CryptoBoard.org.”>
<link rel="shortcut icon" href="./favicon.ico">
<link rel="stylesheet" type="text/css" href="themes/<?php echo $settings['activeTheme']; ?>/main.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="content/ext/msgbox/Scripts/jquery.msgBox.js"></script>
<link rel="stylesheet" type="text/css" href="content/ext/msgbox/Styles/msgBoxLight.css">
<script type="text/javascript" src="content/ext/qtip/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="content/ext/qtip/jquery.qtip.min.css">
<script type="text/javascript" src="js/colors.js"></script>
<?php include './js/includer.php'; ?>
</head>
<body>
<?php include './themes/'.$settings['activeTheme'].'/frontpage.php'; ?>
<!-- _COINTOLI_IDENTIFIER_2_ -->
</body>
</html>
<?php include './inc/end.php'; ?>
<script type="text/javascript">
document.getElementById("loading").style.display = "none";
</script>
Thanks.
