JavaScript下拉菜單的CSS樣式中的延遲

我在網站上使用了Smooth Navigation JavaScript菜單，客戶抱怨在瀏覽網站時瀏覽主導航的樣式有所延遲。JavaScript下拉菜單的CSS樣式中的延遲

正確的是，當您在CSS啓動並且樣式正確之前打開頁面時，可能會有1秒的延遲。 CSS在頁面的頂部，JS在底部，所以我不知道是什麼造成這種延遲？

該網站是http://jomast.co.uk/

任何幫助將不勝感激。

謝謝。

來源

2012-02-10 Graham McDonnell

如何應用該樣式？ CSS？ JavaScript？你有什麼嘗試？ – ManseUK 2012-02-10 11:04:59

你不需要也不應該使用JavaScript來做一個簡單的下拉菜單。

在任何情況下，將類「navv」添加到菜單容器，看看是否解決了這個問題。

更改此：

<div id="nav>

這樣：

<div id="nav" class="navv">

來源

2012-02-10 11:13:15

爲什麼它是如此糟糕的腳本？你能建議一個更好的嗎？ – 2012-02-10 11:29:49

這幾天我建議不要使用Javascript，而應該使用CSS3轉換來處理動畫。一個快速的谷歌發現這個沒有JS的下拉菜單的例子：http://shailan.com/demos/css3-transitions-dropdown.html 最多的時候，應該使用JS來切換類的開啓和關閉來應用/刪除懸停時的樣式。 – 2012-02-10 11:43:56

但是舊版瀏覽器呢？我們JS作爲備份？ – 2012-02-10 12:55:13

基本上，JavaScript在文檔完全加載並處理完Javascript後還需要一些時間。在這段延遲期間，當瀏覽器試圖儘可能快地顯示所有內容時，您可以看到顯示菜單的「無風格」版本。

最簡單的修復方法是以這種方式設置菜單的樣式，即「未設置」版本與「樣式」設置相同。然後將不會閃爍，並且腳本將在頁面完全加載時將其添加爲顯示較慢的動畫。

來源

2012-02-10 11:10:49 bezmax

當瀏覽該網站時，順利通航不會馬上踢。嘗試重新訂購腳本標記：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="scripts/js/ddsmoothmenu.js"></script> 
<script type="text/javascript"> 
    ddlevelsmenu.init("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar") 
</script> 
<script type="text/javascript" src="scripts/js/news.js"></script> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.slideshow').cycle({ 
      fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
     }); 
    }); 
</script>

這也將採取一致的護理：

Uncaught ReferenceError: $ is not defined    news.js:1 
Uncaught ReferenceError: jQuery is not defined   jquery.cycle.all.latest.js:918 
Uncaught ReferenceError: $ is not defined    index.php:149 
Uncaught ReferenceError: ddlevelsmenu is not defined index.php:158

來源

2012-02-10 11:20:34 pete

JavaScript下拉菜單的CSS樣式中的延遲

回答

相關問題