0

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

这里有几张图片显示了页面加载期间的问题：

导航加载： 导航加载

导航已加载： 导航已加载

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

}

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

非常感谢您的帮助！

4

3 回答 3

1

您需要移动您的脚本调用，以便它们在您的 CSS 调用之后出现。发生的情况是，当页面被加载时，浏览器在继续读取您的样式表之前等待脚本加载，从而导致无样式内容的闪烁。

于 2013-02-28T02:29:12.527 回答
0

可能是你的服务器很慢。您的#nav 样式表是否在不同的主机中？

尝试将这些样式添加到您的<head>部分并查看。如果您有图像，但仍然是基本的 HTML，则 CSS 必须快速加载。

于 2013-02-28T02:30:43.883 回答
0

感谢您的帮助，我意识到我的 Header PHP 包含是在 Scripts & CSS 之后加载的，

所以我把它放在页面的最顶部，它现在加载速度更快了。感谢您的帮助！

于 2013-02-28T02:41:30.447 回答