导航加载延迟

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

这里有一对夫妇显示页面加载时的问题图像：

导航加载： Nav Loading

导航加载： Nav Loaded

这里的副本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>

你的帮助是极大的赞赏！

来源

2013-02-28 Willard

你能发布一个链接到你的页面吗？ – zakangelle 2013-02-28 02:22:26

已更新帖子 – Willard 2013-02-28 02:25:39

将脚本移动到文件底部。所以他们最后加载。这会加快你的页面加载速度。 – dnelson 2013-02-28 02:31:39

您需要移动脚本调用，以便它们在您的CSS调用之后。发生什么事情是，当页面被加载时，浏览器正在等待脚本被加载，然后再移动到阅读你的样式表，导致一个无风格内容的闪光。

来源

2013-02-28 02:29:12 zakangelle

嗨，扎克，谢谢你的信息 - 我们可以去聊天吗？我不知道如何设置聊天。 – Willard 2013-02-28 02:34:01

当然，是的。 – zakangelle 2013-02-28 02:35:04

感谢您的帮助。 – Willard 2013-02-28 02:44:05

它可能是你的服务器很慢。你的#nav样式表是在不同的主机还是其他东西？

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

来源

2013-02-28 02:30:43 madhushankarox

谢谢大家的帮助，我才意识到，我的头PHP被列入脚本加载后& CSS，

所以我把它放在网页的最顶端，它装载现在快得多。感谢您的帮助！

来源

2013-02-28 02:41:30 Willard

导航加载延迟

回答

相关问题