Как определить, когда визуализировался динамически созданный элемент

Мне нужно точно измерить размеры текста в моем веб-приложении, чего я достигаю, создав элемент (с соответствующими классами CSS), установив его innerHTML, а затем добавив его в контейнер с помощью appendChild.

После этого есть ожидание до того, как элемент будет визуализирован, и его offsetWidth можно прочитать, чтобы узнать, насколько широко представлен текст.

В настоящее время я использую setTimeout(processText, 100), чтобы дождаться завершения рендеринга.

Есть ли какой-либо обратный вызов, который я могу прослушать, или более надежный способ сообщения, когда созданный элемент был отображен?

Ответ 1

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

Использование setTimeout для предоставления браузера некоторых служебных данных для рендеринга является самым простым способом. Использование

setTimeout(function(){}, 0)

пожалуй, самый практичный, поскольку он помещает ваш код в конец активной очереди событий браузера без каких-либо задержек - другими словами, ваш код ставится в очередь сразу после операции рендеринга (и все остальные операции, которые происходят в это время).

Ответ 2

Это сообщение в блоге Swizec Teller предлагает использовать requestAnimationFrame и проверять размер элемента.

function try() {
    if (!$("#element").size()) {
        window.requestAnimationFrame(try);
    } else {
        $("#element").do_some_stuff();
    }
};

на практике это только когда-либо повторяет один раз. Потому что независимо от того, что, в следующем рендеринге, будь то 60-я секунда или минута, элемент будет отображаться.

Ответ 3

когда вы делаете, например,

var clonedForm = $('#empty_form_to_clone').clone(true)[0];

var newForm = $(clonedForm).html().replace(/__prefix__/g, next_index_id_form);

// next_index_id_form is just a integer

Что я здесь делаю? Я клонировал уже обработанный элемент и изменил отображаемый html.

Затем добавьте этот текст в контейнер.

$('#container_id').append(newForm);

Проблема возникает, когда я хочу добавить обработчик события к кнопке внутри newForm, WELL, просто используйте готовое событие.

$(clonedForm).ready(function(event){
   addEventHandlerToFormButton();
})

Надеюсь, это поможет вам.

PS: Извините за мой английский.