2

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

我将概述我的网页布局

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

有任何想法吗？

4

2 回答 2

2

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

于 2011-04-04T19:15:03.213 回答
0

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

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

于 2016-05-30T11:11:35.220 回答