파이어 폭스의 렌더링 순서

Question

자바 스크립트로 다이어그램 구성 요소를 구축하고 있습니다. 그것은 전경과 배경으로 분리되어 렌더링되는 두 개의 레이어를 가지고 있습니다. 결과

전경 및 코드에서 함께

배경 렌더링의 높이를 측정 렌더링 전경

을

1. :
   는 배경의 필요한 크기를 확인하려면 다음과 같이 보입니다.

   var foreground = renderForegroundIntoString(); 
   parentDiv.innerHTML = foreground; 
   var height = parentDiv.children[0].clientHeight; 
   var background = renderBackgroundIntoString(height); 
   parentDiv.innerHTML = foreground + background; 
   

   IE7을 사용하면 케이크 조각입니다. 그러나 Firefox2는 실제로 parentDiv.innerHTML을 렌더링하려고하지 않으므로 전경을 읽을 수 없습니다.

   언제 Firefox에서 렌더링을 실행하며 전경 렌더링이 완료 될 때까지 배경 생성을 지연시킬 수 있습니까? 아니면 전경 요소의 높이를 결정할 다른 방법이 있습니까?

   은 내가 볼 수 setTimeout(...))에 의해 다시 전화 콜백 메소드 (의 신체 내에서

   [(단 고맙습니다) 댄의 답변을 테스트 한 후 추가 된]를 innerHTML의 렌더링은 아직 완료되지 않았습니다.

Answer 1

당신 다음 코드 행에 의해 렌더링되는 DOM에 방금 삽입 한 내용에 의존해서는 안됩니다. 모든 브라우저는 이러한 변경 사항을 어느 정도 그룹화 할 것이고 언제, 왜 작동하는지 까다로울 수 있습니다.

이를 처리하는 가장 좋은 방법은 응답으로 두 번째 부분을 실행하는 것입니다. 어떤 종류의 사건에. 의 두 번째 부분 전에 완료, 현재의 thread를 보장합니다

setTimeout(renderBackground, 0) 

: 거기에 당신이 그 상황에서 사용할 수있는 좋은 일이, 그래서 그 실패, 당신이 두 번째 부분을 트리거 할 수있는 것처럼은 보이지 않지만 코드가 실행됩니다.

Answer 2

parentDiv.children [0] (아이들은 FF3에서 유효한 속성이 아닙니다.) 대신 parentDiv.childNodes [0]을 원한다고 생각하지만,이 노드에는 아무 것도 가질 수없는 텍스트 노드가 포함됩니다 신장.

 
function getRenderedHeight(parentDiv) { 
if (parentDiv.childNodes) { 
    var i = 0; 
    while (parentDiv.childNodes[i].nodeType == 3) { i++; } 
    //Now parentDiv.childNodes[i] is your first non-text child 
    return parentDiv.childNodes[i].clientHeight; 
    //your other code here ... 
} else { 
    setTimeout("isRendered("+parentDiv+")",200); 
} 
} 

을 다음으로 호출 : 당신과 같이 렌더링 할 parentDiv의 후손을 기다리는 루프 시도 할 수있는 innerHTML을 설정 한 후 getRenderedHeight (parentDiv).

희망은 어쨌든 몇 가지 아이디어를 제공합니다.