Как отследить событие конца отрисовки dom?

#javascript

                    
Есть input для ввода json-schema из которой потом генерируются формочки. Схема очень
большая и при нажатии на кнопку "генерировать" происходит задержка. Причина задержки:
отрисовка dom. 
Я пытаюсь добавить loader. 
Сама функция-обработчик кнопки "генерировать" - работает быстро, и когда я пытаюсь
навесить стили, что бы показать и скрыть лоадер оно не срабатывает, т.к. оно очень
быстро выполняется и пользователь просто не замечает этого. 
Вопрос: есть ли какой-нибудь способ отследить событие конца отрисовки dom?

Это обработчик нажатия на кнопку:

 $('#loader').addClass('active-loader');

 try {
     schema = JSON.parse($schema.value);
 }
 catch (e) {
     alert('Invalid Schema: ' + e.message);
     return;
 }
 // Вызывается метод, который перерисовывает DOM из json-schema
 // json-schema большая. 1.5к строк
 reload();

 // Проблема в том, что эта строка отрабатывает быстрее чем перестроится dom      
 // Это происходит мгновенно. 
 $('#loader').removeClass('active-loader');


Проблема в том, что reload() отрабатывает быстро и loader сразу ныкается. Но dom
еще перерисовывается, хотя функции уже отработали 
    

Ответы

Ответ 1

Что, если рендерить не в DOM, а в переменную, и всё это время показывать «загружается..».
А вставка уже отрендеренного html формы в родительский элемент, должно быть, гораздо
быстрее, чем живой рендер по одному элементу в DOM напрямую?

P.s. Сомневаюсь, что именно отрисовка занимает какое-то заметное время. Но даже если
так – может, просто подобрать «на глаз» и наивно ставить setTimeout()?

P.p.s. Есть события, вне стандартов, специфичные для бразуеров, которые используются
в девелоперских тулзах для оценки эффективности рендеринга страниц, в основном. Но
вы можете попробовать использовать их у себя. Напр. для Mozilla это событие MozAfterPaint
– когда окончилась именно очередная отрисовка.


Ответ 2

Сложно дать правильный ответ, не зная что делает Ваша функция reload, но, как вариант,
в эту самую функцию можно передать callback, закрывающий loader, либо же поместить
логику loader'а в саму функцию reload.

Если же в этой функции используется location.reload, то прочтите ответы на следующий
вопрос.

Надеюсь, мой ответ поможет Вам разобраться с проблемой. Удачи!