Javascript 下拉菜单的 CSS 样式延迟

Question

我在网站上使用了 平滑导航 JavaScript 菜单，客户抱怨说在网站上导航时，主导航的样式出现延迟。

确实，当您打开页面时，在 CSS 启动且样式正确之前，可能会有 1 秒的延迟。 css位于页面顶部，JS位于页面底部，所以我不知道是什么导致了这种延迟？

该网站是 http://jomast.co.uk/

任何帮助将不胜感激。

谢谢。

Answer 1

您不需要也不应该使用 Javascript 来实现这样的简单下拉菜单。

无论如何，将“navv”类添加到菜单容器中，看看是否可以解决问题。

将此：更改

<div id="nav>

为：

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

Answer 2

浏览网站时，流畅的导航不会立即生效。尝试重新排序您的脚本标签：

<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

Answer 3

基本上，JavaScript 在文档完全加载后执行，并且 JavaScript 的处理也需要一些时间。在这段延迟期间，您可以看到菜单的“无样式”版本出现，因为浏览器尝试尽快显示所有内容。

最简单的解决方法是将菜单设计为一种方式，即“无样式”版本看起来与“样式”版本相同。然后就不会闪烁了，当页面完全加载时，脚本将添加缓慢出现的动画。