修复无样式内容的Flash (FOUC)

我读了一篇又一篇的文章，告诉我在使用@import时发生FOUC，您可以在标题中使用链接或脚本标签来解决这个问题。我没有@imports css文件，我已经尝试了链接和脚本标签的解决方案。我还是有同样的问题……

我将给出我的网页布局的总体概述

<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>

就像我说的，我已经试过把<script type="text/javascript">放在我的头标签的开始。

在初始页面加载时，我看到一个FOUC…

任何想法?

这似乎可能只是一个一般的页面速度问题。你正在加载7个不同的javascript文件(7个不同的http请求)，然后在你的document.ready()中调用它们(我假设)。尝试使用谷歌托管版本的jquery和jquery ui(仅下载这些就超过100kb)，然后合并并缩小其余的javascript和css文件。这可能不会使它完美，但它肯定是一个很好的开始。

您可以尝试注释掉不同的脚本标签，以缩小可能导致未样式内容闪烁的脚本。

还认为jquery-ui-1.8.5.custom.css应该在defaultCssDropdown.css、Style.css等之前指定，这样它可以作为基，其他样式表可以覆盖类和id

相关内容

最新更新

热门标签：