How do I know that a browser rendering layout (layout) is over?

our company is an online reader, which uses the form of column to display data.
I wrote the css definitions of various column on a container div.
then, at a certain time, to get the real book content from the background and add it to the container, you also need to show how many pages the current content is actually divided into.

the problem now is that because there is a time lag in the browser layout, the actual content width obtained by our JS wobbles, especially when there are images.

sample code is as follows:

$("-sharpcontainer").append(newContent); // newContentdiv
$("-sharpcontainer").width();   //

the problem is that if the above code is executed immediately, the width value that may be obtained is not accurate, and it needs to be obtained later to be accurate.
however, because we don"t know what the possible length of newContent is, it is impossible to predict a more appropriate delay value. It is best to find a method similar to document.ready, which can be used to determine that a change has been completed by layout, so that the exact value can be obtained.

excuse me, is there such a callback method? Or is there any way to "capture the exact layout completion time"?

Thank you, heroes

May.22,2021

see if this answer can help you
http://stackmirror.caup.cn/pa.


  another question , which is not repeated here. 

in theory, all you need here is setTimeout to get it in the next time period.

Menu