Speed up jQueryUI button

Question

I have a webpage with a lot of checkboxes that I turn into pushbuttons with jQueryUI button() call. This slows the rendering of the page down to a crawl. Is it possible to speed this up?

I do the call in document.ready with selector

$("#containingdiv input[type='checkbox']).button()

I am building a control for a bracket cup. And i am showing the brackts for all agegroups, that is the reason for so many checkboxes. The ones marked in red boxes ar checkboxes and the other ones is normal buttons. There are up to 30 agegroups so i need to show alot of them.

enter image description here

Looks like i should build the ui myself instead of using the pushbuttons from jqueryui. When i profile i chrome it looks like it is building all the nodes that uses all the time.

You might see the suggestion by ChaosPandion here: http://stackoverflow.com/questions/1883611/should-i-use-jquery-each — isherwood, Oct 10 '13 at 13:18
Storing the returnvalue from lookup of all boxes did not give me any speedup, looks like building and inserting the nodes for the fancy buttons in the dom uses most of the time. — klundby, Oct 10 '13 at 13:50

score 1 · Answer 1 · answered Oct 10 '13 at 15:18

Try the following trick. Instead of converting them all at once, convert first hundred (or how many user immidiately sees on the screen), and delay the rest with setTimeout(). This releases the UI thread almost immidiately, therefore browser can do other things like rendering and processing events. Initialization actually becomes longer, but the page is never frozen.

Something like:

var checkboxes_left = $("#containingdiv input[type='checkbox']");
convertRest();

// Convert the first 100 checkboxes, then schedule converting the rest
function convertRest() {
    checkboxes_left.slice(0, 100).button();
    checkboxes_left = checkboxes_left.slice(100);
    if (checkboxes_left.length > 0) {
        window.setTimeout(convertRest, 50);
    }
}

Speed up jQueryUI button

1 Answers1