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

在浏览网站时，平滑导航不会马上启动。尝试重新排序脚本标记：

<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也需要一些时间。在此延迟期间，您可以看到菜单的“无样式”版本显示，因为浏览器会尽快显示所有内容。

最容易修复的方法是将菜单设置为这样一种方式，即“无样式”版本看起来与“样式”版本相同。然后就会没有闪烁，当页面完全加载时，脚本会添加它出现缓慢的动画。

Javascript下拉菜单的CSS样式延迟

3 个答案: