Чем может быть вызвано дрожание окна браузера при динамическом наполнении bootstrap modal?
Здравствуйте!
Есть модальное окно bootstrap modal. В процессе выполнения скрипта в него посредством селекторов jquery добавляются новые элементы для отображения. Если пробежать скрипт в отладчике по шагам, то все ок. А "на лету" в момент добавления элементов происходит дрожание окна браузера и элементы не отображаются. Хотя и добавляются.
bootstrap modal с id = "test_modal" и body с class="modal-body".
Заранее генерим структуру в цикле по i до n:
$("#test_modal .modal-body").append($("<div id='test_id' + i>Поле" + i + "<span></span></div>"))
(в span будет динамически вводится некое значение, как результат работы асинхронной функции).
Далее отображаем модальное окно $("#test_modal").modal("show")
Далее запускаются n асинхронных функций, которые пишут свои результаты $("#test_id" + i + " span").text(result), где i грубо говоря порядковый номер функции
Возможно потому, что https://www.google.com/search?q=reflow+repaint вызываются не при каждом изменении. И это хорошо, ибо иначе оно дико тормозило бы.
Лучше делать все изменения пока окно еще скрыто, и только потом показывать. Еще лучше - использовать что-то более быстрое, чем добавление элементов по одному (innerHTML рулит!).
К сожалению, я максимум могу заранее вставить только структурные блоки в modal, но их наполнение происходит только динамически в зависимости от полученных результатов.
