Question

我有一个jQuery onclick菜单，适用于IE9 +，Chrome和Firefox。但是在IE8中打开速度非常慢。菜单显示大约需要10秒钟，并且没有任何动画播放，菜单才会出现。

该菜单使用最新版本的jQuery（v1.10.2），仅使用幻灯片和动画来打开和关闭菜单的不同部分。我已经尝试使用google搜索缓慢的jQuery，慢速加载菜单和IE8和jQuery的慢动画的各种组合，我甚至无法找到任何远程问题，就像我遇到的问题一样。

您可以转到我的website here来查看问题。使用IE8访问它，当您单击测试类别1或2时，您会注意到速度非常慢。

之前有没有人遇到过这类问题？有谁知道是什么导致它和解决方案让它工作正常？

修改

我注意到它不仅影响菜单，还影响旋转木马。如果你看动画，它们也不会滑动，但是在IE9 +中它们会滑动。我不确定这两个是否有关联但似乎奇怪的是它们都受到影响的jQuery效果。

修改2

经过一些更多的测试后，我注意到如果菜单的底部落在旋转木马下方的标签上，那么标签上的位会立即显示，如果你在标签上方。关闭菜单时也会发生相同的情况。将鼠标悬停在标签上，然后绘制的菜单位就会消失。

然后我观察并注意到当旋转木马改变时菜单显示并消失。它似乎确实是一个重绘问题，但是我试图在完成后绘制的代码似乎不起作用。这是我从另一个answer here获得的代码（稍微修改后可以使用jQuery元素，这要归功于下面的答案）。

function FlushThis(id){
   var msie = 'Microsoft Internet Explorer';
   var tmp = 0;
   //var elementOnShow = document.getElementById(id);
   var elementOnShow = $(id);
   if(navigator.appName == msie) {
      tmp = elementOnShow.parentNode.offsetTop  +  'px';
   } else {
      tmp = elementOnShow.offsetTop;
   }
}

我认为可能是找到正确的重绘功能，或者在正确的元素上运行该功能的情况。我目前在点击的元素上运行它，这可能不是正确的元素。我已经尝试在各种元素上运行该函数，包括主要的UL，单击的元素，元素，打开以及元素打开的父元素。没有任何运气。

JSFiddle：根据请求here is a JSFiddle的问题，但对我来说，甚至不能在IE10中运行。它适用于Chrome。

编辑3：

我已经删除了除了必需品以外的所有内容并将其放入测试文件中。你可以veiw it on my website here。我在IE控制台或任何其他控制台中都没有出错。它仍然提供相同的问题，其中未绘制菜单。但是因为它背后没有旋转木马来强制重绘它从未在这个测试网站上显示过。

到目前为止我尝试过的所有重绘脚本都失败了。我怎样才能使这个工作？

Answer 1

我不知道这是否相关，但我注意到每次点击这些菜单时都会出现错误。

Uncaught TypeError: Cannot read property 'offsetTop' of null

它出现在“FlushThis”函数中（来自jquery.fluid-menu.js），这显然是某种支持IE的黑客攻击。如果查看代码，它会尝试读取元素的“offsetTop”属性，然后简单地抛弃结果。也许这是IE上的一个技巧，使它运行一些本机代码，一旦打开菜单，它可能会重新显示/重新布局页面？它看起来像一个jqueryified元素（$ this）被传递给该函数而不是元素的ID，我认为这导致查找失败。您可能希望尝试正确执行该代码并查看它是否可以解决您的问题。

Answer 2

要查看真正问题的脚本问题太多。

SCRIPT1028: Expected identifier, string or number 
jquery.fluid-menu.js, line 15 character 3
SCRIPT438: Object doesn't support property or method 'fluidMenu' 
main.js, line 3 character 2

单击菜单时会出现脚本问题。

Chrome和Mozilla可以最大程度地容忍错误，而不会让用户知道存在脚本错误。但IE并不那么善良。 IE 8＆amp; - 在运行脚本本身很慢很多动画效果都不会在它们中起作用，因为它会忽略不透明度等属性，除非你有后退选项。

Answer 3

播放动画时，幻灯片可能会覆盖菜单。我可以将我的ie10设置为ie8模式，并看到图层不是最佳显示顺序。

您是否尝试在菜单上设置z-index？也许您尝试暂时隐藏轮播，然后检查菜单是否打开。

Answer 4

您是否有使用“document.getElementById”而不是JQuery选择器的具体原因？它没有找到document.getElementById(id)而且它在这一行上引发了错误：tmp = elementOnShow.parentNode.offsetTop + 'px';：

function FlushThis(id){
    var msie = 'Microsoft Internet Explorer';
    var tmp = 0;
    var elementOnShow = document.getElementById(id);
    if(navigator.appName == msie) {
        tmp = elementOnShow.parentNode.offsetTop  +  'px';
    } else {
        tmp = elementOnShow.offsetTop;
    }
}

也许将var elementOnShow = document.getElementById(id);更改为var elementOnShow = $("#" + id);？

另外，为什么要在IE中添加“px”？尝试对其进行评论，只需说tmp = elementOnShow.offsetTop，看看是否有所作为。

该错误可能只是禁用了该页面上其余大部分Javascript。

我发现另外一件事：有时候“slideUp”和“slideDown”以及其他“内置”动画方法在IE中似乎有些错误或松脆（比如，它们大部分都是动画，然后它们会停止接近动画结束的第二个，并突然眨眼结束）。

我总是使用JQuery animate()函数。编写它有点痛苦，但你可以指定考虑填充的outerHeight / outerWidth值以及类似的东西。尝试用animate()替换你的功能，看看是否有帮助！

Onclick菜单缓慢打开

4 个答案: