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

标签 jquery html css internet-explorer-8 fouc

我读了一篇又一篇文章,告诉我使用@import 时会出现 FOUC,您可以在 header 中使用链接或脚本标签来解决问题。我没有用于 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">在我的 header 标签的开头。

在初始页面加载时,我看到一个 FOUC...

有什么想法吗?

最佳答案

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

关于jquery - 修复无样式内容的 Flash (FOUC),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5538718/

相关文章:

javascript - 如何使用 selected.js 从下拉列表中获取所选值

jQuery:检查名称中包含相同部分的类的 DIV 组中的哪些 DIV 具有某些属性

javascript - 谷歌地图显示灰色框而不是 map

javascript - 在网站上显示关键文本的不同方式有哪些?

javascript - 使用 DOM 样式通过 Javascript 获取或更改 CSS 类属性

javascript - 设置左样式 CSS 属性以在 Javascript 中移动 slider

字符串上的 jQuery 选择器仅在被 div 包围时才有效

javascript - 如何格式化从javascript加载的网页内容?

c# - 使用 ASP.Net 实现多语言网站

javascript - 圈圈进度条一直循环