Fix Flash of Unstyled Content (FOUC)
I have read artical after artical telling me that a FOUC occurs when using @import and that you can use link or script tags in the header to fix the problem. I have no @imports for css files, and I have tried the link and script tag solution. 开发者_C百科I still have the same problem...
I'll give a general overview of the layout of my webpage
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>My Ttile</title>
<link type="text/css" href="css/defaultCssDropdown.css" rel="stylesheet" />
<link type="text/css" href="css/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
<link type="text/css" href="css/Style.css" rel="stylesheet" />
<style type="text/css">
.watermark { color: #999; }
input.text { width:95%;}
h1 { font-size: 1.2em; margin: .6em 0; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
.jtable .wrap{overflow:hidden}
.jtable{ table-layout: fixed; }
.gray{ color:#808080}
#dialog-message-email {
position: relative;
min-height: 200px;
}
#dialog-message-email div {
position: absolute;
top: 50px;
bottom: 12px;
left: 0;
right: 12px;
width: auto;
}
#ConfirmEmailText {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
...
html stuff here
...
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<%--<script type="text/javascript" src="js/jquery.watermarkinput.js"></script>--%>
<script type="text/javascript" src="js/jquery.watermark.min.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>
<script type="text/javascript" src="js/autoresize.jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function () {
...some javascript here...
</script>
</body>
</html>
like I said I have already tried placing <script type="text/javascript"> at the beggining of my header tag.
On inital page load I see a FOUC...
Any ideas?
This seems like it may just be a general page speed issue. You're loading seven different javascript files (7 different http requests) and THEN calling them (I assume) in your document.ready(). Try using a google-hosted version of jquery and jquery ui (these alone are over 100kb of downloading) and then combine and minify the rest of your javascript and css files. This probably won't make it perfect but it could certainly be a good place to start.
You could try to comment out different script tags to narrow down which script might be causing the flash of unstyled content.
Also think that jquery-ui-1.8.5.custom.css should be specified before, defaultCssDropdown.css, Style.css, etc. so that it can serve as the base, for which the other stylesheets can overwrite classes and ids.
加载中,请稍侯......
精彩评论