JavaScriptのドロップダウンメニューのCSSスタイルの遅延

Question

ウェブサイト上でSmooth Navigation JavaScriptメニューを使用していて、クライアントがウェブサイトをナビゲートするときにメインナビゲーションのスタイリングに遅延があると訴えています。

実際、CSSを起動してスタイルを正しく適用する前にページを開くと、1秒以上の遅延があります。 CSSはページの一番上にあり、JSは下部にありますので、この遅延の原因は何もわかりません。

ウェブサイトはhttp://jomast.co.uk/

任意の助けいただければ幸いです。

ありがとうございました。

Answer 1

このような単純なドロップダウンメニューには、Javascriptを使用する必要はありません。

いずれにしても、メニューコンテナに「navv」クラスを追加し、問題が解決するかどうかを確認します。

変更この：これに

<div id="nav> 

：

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

Answer 2

基本的には、ドキュメントが完全に読み込まれた後にjavascriptが実行され、そのJavaScriptの処理にも時間がかかります。その遅れの間、ブラウザーができるだけ早くすべてを表示しようとすると、表示されているメニューの「非スタイル」バージョンが表示されます。

最も簡単な修正は、メニューのスタイルを変更することです。「スタイルなし」のバージョンは「スタイリング」と同じに見えるでしょう。その後、点滅はなく、スクリプトは、ページが完全に読み込まれると、ゆっくりと表示されるアニメーションを追加します。

Answer 3

サイトをナビゲートし、スムーズなナビゲーションはすぐにキックしません。あなたのスクリプトタグを再注文してみてください。

<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