Stack Overflow works best with JavaScript enabled banner

问题:

I am trying to mimic this site's Javascipt required banner, and have the below divs which are being hidden if javascript is allowed/enabled, but I am getting a flash/glimps of it on page load.

<div id="Main_noJS">Craftystuff.com works best with JavaScript enabled</div> <div id="PartOfMain_noJS"><br /></div> 

CSS:

#Main_noJS {     width: 100%;     height: 23px;     font-family: Arial;     font-size: 111%;     color: White;     font-weight: bold;     background: #AE0000;     text-align: center;     padding-top: 4px;     position: fixed;     z-index: 100; } 

JavaScript:

// hide the "Craftystuff.com works best with JavaScript enabled" banner, if JavaScript is working if ($("#Main_noJS")) {     $("#Main_noJS").hide();     // hide the spacer between the main content and banner...     $("#PartOfMain_noJS").hide(); } 

So the banner is visible to start with, and only when javascript is enabled do I hide it

• but javascript must take a second to get to work to hide things...

I would like to try to stop the glimps of the banner, when the page first loads, any help?

回答1:

Put the banner in a a <noscript> tag, documented here.

<noscript>    <div>yada yada yada</div> </noscript> 

回答2:

You can simply write out a tag that hides the element while the page loads, then it won't be visible waiting for the script to run:

<script>document.write('<div style="display:none;">');</script> <div id="Main_noJS">Craftystuff.com works best with JavaScript enabled</div> <script>document.write('</div>');</script> 

文章来源: Stack Overflow works best with JavaScript enabled banner