Adakah terdapat "rendering elemen"? peristiwa?

Question

Saya perlu mengukur dengan tepat dimensi teks dalam aplikasi web dan saya melakukannya dengan mencipta elemen (dengan kelas CSS yang berkaitan), menetapkannya innerHTML 然后使用 appendChild dan menambahkannya pada bekas.

Selepas melakukan ini, anda perlu menunggu seketika sebelum elemen dipaparkan dan offsetWidthnya boleh dibaca untuk mengetahui lebar teks.

Pada masa ini, saya menggunakan setTimeout(processText, 100) untuk menunggu rendering selesai.

Adakah terdapat sebarang panggilan balik yang boleh saya dengar, atau cara yang lebih dipercayai untuk mengetahui apabila elemen yang saya buat telah dipaparkan?

Answer 1

Jawapan yang diterima adalah dari 2014 dan kini sudah lapuk. setTimeout Mungkin berfungsi, tetapi ia bukan yang paling bersih dan tidak semestinya menjamin bahawa elemen itu telah ditambahkan pada DOM.

Sehingga 2018, MutationObserver ialah perkara yang perlu anda gunakan untuk mengesan apabila elemen ditambahkan pada DOM. MutationObservers kini disokong secara meluas dalam semua penyemak imbas moden (Chrome 26+, Firefox 14+, IE11, Edge, Opera 15+, dll.).

Selepas menambah elemen pada DOM, anda akan dapat mendapatkan semula dimensi sebenar.

Berikut ialah contoh mudah cara menggunakan MutationObserver untuk mendengar apabila elemen ditambahkan pada DOM.

Demi ringkasnya, saya menggunakan sintaks jQuery untuk membina nod dan memasukkannya ke dalam DOM.

var myElement = $("
hello world
")[0];

var observer = new MutationObserver(function(mutations) {
   if (document.contains(myElement)) {
        console.log("It's in the DOM!");
        observer.disconnect();
    }
});

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

$("body").append(myElement); // console.log: It's in the DOM!

Asalkan dalam document 中添加或删除任何节点，observer 事件处理程序就会触发。然后，在处理程序内，我们执行 contains 检查以确定 myElement 现在是否位于 document.

Anda tidak memerlukan lelaran yang disimpan dalam cek mutations 中的每个 MutationRecord，因为您可以直接对 myElement 执行 document.contains.

Untuk meningkatkan prestasi, tukar document 替换为 DOM 中将包含 myElement kepada elemen tertentu.

Answer 2

Tiada peristiwa DOM pada masa ini yang menunjukkan bahawa elemen telah dipaparkan sepenuhnya (seperti CSS tambahan digunakan dan dilukis). Ini mungkin menyebabkan beberapa kod manipulasi DOM mengembalikan ralat atau hasil rawak (seperti mendapatkan ketinggian elemen).

Menggunakan setTimeout untuk memberikan penyemak imbas sedikit overhed pemaparan ialah cara paling mudah. Gunakan

setTimeout(function(){}, 0)

mungkin adalah yang paling tepat secara praktikal, kerana ia meletakkan kod anda pada penghujung baris gilir acara penyemak imbas yang aktif tanpa sebarang kelewatan - dengan kata lain, kod anda dibarisi sejurus selepas operasi pemaparan (dan semua perkara lain yang berlaku pada masa itu) ) .