"요소 렌더링"이 있습니까? 이벤트?

Question

웹 애플리케이션에서 텍스트의 크기를 정확하게 측정해야 하는데 (관련 CSS 클래스를 사용하여) 요소를 생성하고 설정innerHTML 然后使用 appendChild하고 컨테이너에 추가하여 이를 수행합니다.

이 작업을 수행한 후 요소가 렌더링될 때까지 잠시 기다려야 하며 해당 offsetWidth를 읽어 텍스트 너비를 알 수 있습니다.

현재 setTimeout(processText, 100)를 사용하여 렌더링이 완료될 때까지 기다리고 있습니다.

내가 들을 수 있는 콜백이 있나요? 아니면 내가 만든 요소가 렌더링되었는지 알 수 있는 더 안정적인 방법이 있나요?

Answer 1

허용된 답변은 2014년의 답변이며 현재는 유효하지 않습니다. setTimeout 작동할 수도 있지만 가장 깔끔하지는 않으며 요소가 DOM에 추가되었음을 반드시 보장하지는 않습니다.

2018년 현재 MutationObserver는 요소가 DOM에 추가되는 시기를 감지하는 데 사용해야 합니다. MutationObservers는 이제 모든 최신 브라우저(Chrome 26+, Firefox 14+, IE11, Edge, Opera 15+ 등)에서 널리 지원됩니다.

DOM에 요소를 추가한 후 실제 크기를 검색할 수 있습니다.

다음은 요소가 DOM에 추가될 때 MutationObserver를 사용하여 수신하는 방법에 대한 간단한 예입니다.

간단하게 하기 위해 jQuery 구문을 사용하여 노드를 빌드하고 DOM에 삽입합니다.

으아아아

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

mutations 中的每个 MutationRecord，因为您可以直接对 myElement 执行 document.contains 검사에 저장된 반복은 필요하지 않습니다.

성능을 향상하려면 document 替换为 DOM 中将包含 myElement을 특정 요소로 변경하세요.

Answer 2

현재 요소가 완전히 렌더링되었음을 나타내는 DOM 이벤트가 없습니다(예: 추가 CSS가 적용되고 그려짐). 이로 인해 일부 DOM 조작 코드가 오류나 임의의 결과(예: 요소 높이 가져오기)를 반환할 수 있습니다.

setTimeout을 사용하여 브라우저에 렌더링 오버헤드를 제공하는 것이 가장 쉬운 방법입니다.

를 사용하세요 으아아아

는 지연 없이 코드를 활성 브라우저 이벤트 큐의 끝에 배치하므로 아마도 가장 실질적으로 정확할 것입니다. 즉, 코드는 렌더링 작업 직후에 큐에 추가됩니다(및 당시 발생하는 다른 모든 작업). ).