带有AJAX内容的JQuery UI选项卡使用IE9非常慢

I am using JQuery UI Tabs with AJAX content.

我正在使用带有AJAX内容的JQuery UI选项卡。

The loaded data are a DataTables element with ~100 rows and 10 columns.

加载的数据是一个包含~100行和10列的DataTables元素。

Everything is fine with FF, Chrome, Safari and Opera, but with IE9 the loaded table is very slow.

FF,Chrome,Safari和Opera的一切都很好,但是对于IE9,加载的表格非常慢。

I tried to load the DataTable usin .load() method in IE9 and it is fine, but using JQueryUI tabs it is really not. I tried JQueryUI 1.8.22 and 1.9.1 but the behaviour is the same.

我试图在IE9中加载DataTable usin .load()方法,这很好,但是使用JQueryUI选项卡实际上并非如此。我尝试过JQueryUI 1.8.22和1.9.1,但行为是一样的。

Is someone already dealt with this such of problem?

有人已经处理过这样的问题吗?

EDIT

In fact the problem is not bound with DataTables but due to "large" content loaded through AJAX into the tab. Futhermore, the loaded JS code, scroll and even CSS :hover are really not reactive

事实上,问题不是与DataTables绑定,而是由于通过AJAX将“大”内容加载到选项卡中。此外,加载的JS代码,滚动甚至CSS:悬停都不是被动的

2 个解决方案

#1

IE renders tables particularly slowly when they are hidden/not visible. This is a documented issue. Best thing to do would be:

IE隐藏/不可见时,表格特别慢。这是一个记录在案的问题。最好的办法是:

$('#yourTabs').tabs({
    "select": function(ev, ui){
        if(ui.index == whateverIndexYourTableIsIn) {
            dtYourTable.fnAddData(yourData);
        }
    }
});

This will only render the table (data) when the table becomes visible, thus not slowing down in IE nearly as much... though IE is still just overall slower than the other new browsers in this regard.

这只会在表变得可见时呈现表(数据),因此在IE中几乎不会减慢速度......尽管IE在这方面仍然比其他新浏览器整体慢。

Discussion on IE "hidden innerHTML slowness"

关于IE“隐藏的内部HTML慢”的讨论

http://datatables.net/forums/discussion/1389/x#Item_8

http://datatables.net/forums/discussion/11701/why-does-datatable-run-so-slow-in-ie89-etc../p1

#2

I used a fix tab content height. I don't understand why, by this slows down a lot the browser rendering in IE (8 and 9).

我使用了修复标签内容高度。我不明白为什么,这会减慢IE浏览器渲染(8和9)的速度。

To fix this problem, I replaced the fix tab content height by CSS property height:90% and add a fix table height to the datatable sScrollY": "1000px // 90% of the tab content height. I set up a window event on resize to redraw the datatable with the right value to fit the window size.

为解决此问题,我将修复选项卡内容高度替换为CSS属性高度:90%,并将修复表高度添加到数据表sScrollY“:”1000px //选项卡内容高度的90%。我在resize上设置了一个窗口事件,用正确的值重新绘制数据表以适合窗口大小。

I hope to help all people facing the same IE issue.

我希望能帮助所有面临同样IE问题的人。

#1