導航加載延遲

我注意到我建立的網站有一個奇怪的加載問題。當導航鏈接加載到頁面的頂部時，它們以非程式化的形式顯示在瀏覽器的左側角落，在加載前用項目符號，下劃線等顯示。 有沒有一種方法可以對此進行不同的編碼，以便隱藏加載過程？導航加載延遲

這裏有一對夫婦顯示頁面加載時的問題圖像：

導航加載： 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

導航加載延遲

回答

相關問題