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

これは、一般的なページ速度の問題のようです。7つの異なるjavascriptファイル（7つの異なるhttpリクエスト）をロードしてから、document.ready（）でそれらを呼び出します（私は推測します）。googleがホストするバージョンのjqueryとjqueryui（これらだけで100kb以上のダウンロード）を使用してから、残りのjavascriptファイルとcssファイルを組み合わせて縮小してみてください。これではおそらく完璧にはなりませんが、開始するのに適した場所である可能性があります。

于 2011-04-04T19:15:03.213 に答える
0

さまざまなスクリプト タグをコメント アウトして、スタイル設定されていないコンテンツのフラッシュを引き起こしている可能性のあるスクリプトを絞り込むことができます。

また、 、 、 などのjquery-ui-1.8.5.custom.css前に指定する必要があると考えてください。これにより、他のスタイルシートがクラスと ID を上書きできるベースとして機能できるようになります。defaultCssDropdown.cssStyle.css

于 2016-05-30T11:11:35.220 に答える