JQuery UI Tabs with AJAX content VERY slow using I

Question

I am using JQuery UI Tabs with AJAX content.

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

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

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.

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

Answer 1

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

$('#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.

Discussion on IE "hidden innerHTML slowness"

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

Answer 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).

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.

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