A Flash Of Unstyled Contend Appearing On Only One Page-CodePudding

Below is the menu bar and javascript that I'm using to create a website. I've set it so that the flash of unstyled content doesn't appear. The code that I'm using to do this works well on every other page I've tested it on except for this one. This is a page with a fair number of photos and text on it, but that wouldn't affect the page to load ignoring the code I've put in, would it?

Does anyone have any solutions for fixing this flash of unstyled content? Also, does anyone know why the code I implemented doesn't work on only one page?

<!DOCTYPE html>
<html lang="en">
    
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
    
<body style="visibility: hidden;" onl oad="js_Load() background-color: white; font-family: sans-serif;">
    
<title>#</title>
      
<div >
    
<div >
<input id="cp_toggle03" type="checkbox"/>
<div >
<label for="cp_toggle03" >
<span></span>
</label>
</div>
<label id="h-menu_black"  for="cp_menuicon"></label>
<div id="body" ></div>
        
<header >
        
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
            
<li style="border-bottom: .05px solid lightgray;"><a href="../../../../../Home_English.html">Home</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="../../../../../Blog_English.html">Blog</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="../../../../../About_English.html">About This Website</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="../../../../../Bibliography_English.html">Bibliography</a></li>            
        
<div > 
            
<form id="frmSearch"  method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
<input  id="txtSearch" type="text" placeholder="Custom Google Search" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
<input  type="submit" name="submition" value="Search" style="padding-left: 5px; top: 153px; height: 25px; width: 50px; display: inline-flex; justify-content: center;">
<input  type="hidden" name="sitesearch" value="default.html">    

</form>
</div>    

    
<script type="text/javascript">
 document.getElementById('frmSearch').onsubmit = function() {
 window.location = 'http://www.google.com/search?q=site:morikoboshi.com'   document.getElementById('txtSearch').value;
        return false;
    }
 
</script>


<script>
 document.getElementById('cp_toggle03').onchange = function() {
 if (document.getElementById('cp_toggle03').checked) {
 document.body.style.overflow = "hidden";
  } else {
 document.body.style.overflow = "";
  }
} 
 
if(!!window.performance && window.performance.navigation.type == 2)
{
    window.location.reload();
}
</script>
    
<script>
    
document.body.style.visibility='visible';
    
</script>

</ul>    
</nav>
</header>

CodePudding user response：

Try adding document.body.style.visibility='visible' into js_Load, or just run it onl oad.

However why is there background-color: white; font-family: sans-serif; in body onl oad?

Edit: This is probably due to the position of the js_Load function and document.body.style.visibility='visible'. document.body.style.visibility='visible' has already run before js_Load is called.

CodePudding user response：

Untested but you can try something like the code below.

The main logic is to just run the onload="js_Load()" function on a page load Event (when it is detected).

<!DOCTYPE html>
<html lang="en">
    
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
    
<body style="visibility: hidden;" onl oad="js_Load()" style="background-color: white; font-family: sans-serif;" >
    
<title>#</title>
      
<div >
    
<div >
<input id="cp_toggle03" type="checkbox"/>
<div >
<label for="cp_toggle03" >
<span></span>
</label>
</div>
<label id="h-menu_black"  for="cp_menuicon"></label>


<div id="body" ></div>
        
<header >
        
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
            
<li style="border-bottom: .05px solid lightgray;"><a href="../../../../../Home_English.html">Home</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="../../../../../Blog_English.html">Blog</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="../../../../../About_English.html">About This Website</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="../../../../../Bibliography_English.html">Bibliography</a></li>            
        
<div > 
            
<form id="frmSearch"  method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
<input  id="txtSearch" type="text" placeholder="Custom Google Search" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
<input  type="submit" name="submition" value="Search" style="padding-left: 5px; top: 153px; height: 25px; width: 50px; display: inline-flex; justify-content: center;">
<input  type="hidden" name="sitesearch" value="default.html">    

</form>
</div>    


</ul>    
</nav>
</header>

</body>


<script type="text/javascript">


function js_Load() 
{ document.body.style.visibility='visible'; }

document.getElementById('frmSearch').onsubmit = function() 
{
    window.location = 'http://www.google.com/search?q=site:morikoboshi.com'   document.getElementById('txtSearch').value;
    return false;
}
  
document.getElementById('cp_toggle03').onchange = function() 
{
    if (document.getElementById('cp_toggle03').checked) 
    { document.body.style.overflow = "hidden"; } 
    else { document.body.style.overflow = ""; }
} 
 
if(!!window.performance && window.performance.navigation.type == 2)
{
    window.location.reload();
}


</script>

</html>