3

我有一个在 IE9+、Chrome 和 Firefox 中运行良好的 jQuery onclick 菜单。但是在 IE8 中打开速度非常慢。菜单显示大约需要 10 秒，并且没有任何动画播放，菜单只是出现。

该菜单使用最新版本的 jQuery (v1.10.2)，并且仅使用幻灯片和动画来打开和关闭菜单的不同部分。我已经尝试在谷歌上搜索各种慢速 jQuery、慢速加载菜单和慢速动画的 IE8 和 jQuery 组合，但我什至无法远程找到任何像我遇到的问题一样的东西。

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

有没有人遇到过这种问题？有谁知道是什么原因导致它以及让它正常工作的解决方案？

编辑

我注意到它不仅会影响菜单，还会影响轮播。如果您查看动画，它们也不会滑动，但是在 IE9 + 中它们确实会滑动。我不确定这两者是否有联系，但奇怪的是这两个 jQuery 效果都受到了影响。

编辑 2

经过更多测试后，我注意到如果菜单的底部落在轮播下方的选项卡上，那么选项卡上的位会立即显示，如果你在选项卡上。关闭菜单时也会发生同样的情况。将鼠标悬停在选项卡上，那里绘制的菜单部分就会消失。

然后我观察并注意到当轮播发生变化时菜单会显示和消失。这似乎是一个重绘问题，但是我一直试图让它在完成后绘制的代码似乎不起作用。这是我从这里的另一个答案中得到的代码（由于下面的答案，稍作修改以使用 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：这里的要求是问题的 JSFiddle，但对我来说，它甚至在 IE10 中都行不通。它在 Chrome 中运行良好。

编辑 3：

除了最基本的必需品之外，我已经剥离了所有东西并将其放入测试文件中。你可以在我的网站上查看它。我在 IE 控制台和任何其他控制台中都没有收到错误。它仍然给出同样的问题，菜单没有被绘制。但是，因为它后面没有轮播来强制重绘，所以它永远不会在这个测试站点上显示。

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

4

4 回答 4

1

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

Uncaught TypeError: Cannot read property 'offsetTop' of null

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

于 2013-07-19T15:30:09.910 回答
1

脚本问题太多，无法调查真正的问题。

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 & - 在运行脚本时本来就很慢，许多动画效果在它们中不起作用，因为它忽略了像不透明度这样的属性，除非你有回退选项。

于 2013-07-23T09:34:25.507 回答
0

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

您是否尝试在菜单上设置 z-index？也许您尝试暂时隐藏轮播并检查菜单是否可以正常打开。

于 2013-07-17T14:59:50.223 回答
0

您在这里使用“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 中似乎是错误的或松脆的（比如，它们大部分都在动画，然后它们在附近停了一秒钟动画结束，突然闪烁到结束）。

我总是对所有事情都使用 JQueryanimate()函数。写起来有点麻烦，但是您可以指定将填充考虑在内的 outerHeight/outerWidth 值等。尝试替换您的功能，animate()看看是否有帮助！

于 2013-07-19T16:46:29.797 回答