0

I've noticed an odd loading issue on a site that I built. When the navigation links load at the top of the page, they are displayed in the left hand corner of the browser in their un-stylized form, with bullets, underlines, etc. before loading. Is there a way that I can code this differently so that it hides the loading process?

Here's a couple of images showing the problem during the page load:

Nav Loading: Nav Loading

Nav Loaded: Nav Loaded

Here's a copy of the CSS:

/*Header Link Wrap & Align*/

#nav-wrap { 
    width: 100%;
    overflow: hidden;
    height: 52px;
    background-image: url(/images/hlink-bg.jpg);
    background-repeat: repeat-x;

}


#nav {
    text-align: center;
    margin:0px;
    padding:0px;

}

#nav li {
    list-style: none;
    display: inline-block;
    vertical-align: middle;
    padding: 0px 10px 0px 0px;
}

#nav a {
    color: #FFFFFF;
    display: inline-block;
    font-family:arial;
    margin: 0;
    padding: 9px 18px 9px 18px;
    text-decoration: none;
    vertical-align: middle;
}

#nav a:hover {
    background-color: #ffa500;
    color: #fff9;
}




.head-divider {
    list-style: none;
    vertical-align: middle;
    display: inline-block; 
    margin: 0;
    width:2px;
    height:52px;
    background-image:url(/images/h-divider.jpg);
    background-repeat: no-repeat;

}

The HTML:

<div id="nav-wrap">
    <ul id="nav">
    <li><a href="homes.php">Custom Homes</a></li>
    <li class="head-divider"></li>
    <li><a href="inspections.php">Inspection Services</a></li>
    <li class="head-divider"></li>
    <li><a href="energy.php">Energy Audits</a></li>
    <li class="head-divider"></li>
    <li><a href="complete-services.php">Complete Services</a></li>
    <li class="head-divider"></li>
    <li><a href="contact.php">Contact</a></li>
    <li class="head-divider"></li>
    <li><a href="http://www.newdayhomes.us/blog/">Blog</a></li>
    </ul>   
</div>  
</div>

Your help is greatly appreciated!

4

3 に答える 3

1

CSS 呼び出しの後に来るように、スクリプト呼び出しを移動する必要があります。何が起こっているかというと、ページがロードされているとき、ブラウザーはスタイルシートの読み取りに移る前にスクリプトがロードされるのを待っているため、スタイル設定されていないコンテンツが一瞬表示されます。

于 2013-02-28T02:29:12.527 に答える
0

助けてくれてありがとう、ヘッダー PHP インクルージョンがスクリプトと CSS の後に読み込まれていることに気付きました。

そのため、ページの一番上に配置したところ、読み込みがはるかに高速になりました。ご協力ありがとうございました！

于 2013-02-28T02:41:30.447 に答える
0

サーバーが遅い可能性があります。#nav のスタイルシートは別のホストか何かにありますか?

これらのスタイルを<head>セクションに追加してみてください。画像はあるが基本的な HTML がある場合、CSS は高速にロードする必要があります。

于 2013-02-28T02:30:43.883 に答える