Html 导航加载延迟

我注意到在我创建的站点上有一个奇怪的加载问题。当导航链接加载到页面顶部时，它们以非样式化的形式显示在浏览器的左角，加载前带有项目符号、下划线等是否有一种方法可以对其进行不同的编码，从而隐藏加载过程？

以下几幅图片显示了页面加载过程中出现的问题：

导航加载：

导航加载：

这是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;

}

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

HTML:

/*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;

}

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

---

非常感谢您的帮助

您需要移动脚本调用，以便它们位于CSS调用之后。正在发生的情况是，当加载页面时，浏览器正在等待加载脚本，然后再继续读取样式表，从而导致未设置样式的内容闪烁。

可能是您的服务器速度较慢。您的#nav样式表是否位于其他主机中

---

尝试将这些样式添加到

部分，请参见。如果你有图像，但仍然是基本的HTML，CSS必须快速加载。

谢谢你的帮助，我意识到我的头PHP包含在脚本和CSS之后加载

---

所以我把它放在页面的最上面，现在加载速度快多了。谢谢你的帮助

你能发布一个链接到你的页面吗？把你的脚本移到文件的底部。这样他们才能最后加载。这将加快你的页面加载。嗨，扎克，谢谢你提供的信息-我们可以去聊天吗？我不知道如何设置聊天。