Ускорьте jQueryUI кнопку

Question

У меня есть веб-страница с большим количеством флажков, которые я превращаю в кнопки с вызовом jQueryUI button(). Это замедляет рендеринг страницы до обхода. Можно ли это ускорить?

Я делаю вызов в document.ready с селектором

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

Я строй контроля за чашку кронштейна. И я показываю брекеты для всех возрастных групп, что является причиной стольких флажков. Флажки, отмеченные красными ящиками, а другие - обычные кнопки. Есть до 30 возрастных групп, поэтому мне нужно показать их много.

Похоже, я должен построить пользовательский интерфейс сам вместо использования кнопок от jqueryui. Когда я просматриваю i chrome, похоже, что он строит все узлы, которые используют все время.

Answer 1

Попробуйте следующий трюк. Вместо того, чтобы конвертировать их все сразу, конвертировать первую сотню (или сколько пользователей с нетерпением видит на экране), и задержать остальных с setTimeout(). Это освобождает поток пользовательского интерфейса почти мгновенно, поэтому браузер может выполнять другие действия, такие как рендеринг и обработка событий. Инициализация фактически становится длиннее, но страница никогда не замерзает.

Что-то вроде:

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); 
    } 
}