在Firefox中渲染顺序

我使用JavaScript构建图表组件。它有两层分别渲染：前景和背景。在Firefox中渲染顺序

为了确定背景的所需尺寸：

呈现前景
测量结果
呈现前景和背景一起

在代码的高度它看起来像这样：

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的渲染仍然是不完整的。

来源

2008-10-03 Mr. Lame

你应该永远不要依赖于你刚刚插入到下一行代码所呈现的DOM中的东西，所有的浏览器都会在一定程度上将这些更改分组在一起，并且在什么时候以及为什么会将它们分组。处理这个问题的最好方法是执行第二部分作为回应到某种事件。虽然它看起来并不像有一个很好的，你可以在这种情况下使用，所以做不到这一点，你可以触发第二部分有：

setTimeout(renderBackground, 0)

这将确保当前线程的第二部分之前完成代码被执行。

来源

2008-10-03 20:31:10 Dan

我不认为你想要parentDiv.children [0]（儿童不是FF3中的有效属性），而是你想要parentDiv.childNodes [0]，但请注意，这包括文本节点可能没有高度。你可以尝试循环等待parentDiv的后裔要呈现像这样：

 
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); 
} 
}

，然后通过调用：getRenderedHeight（parentDiv）设置的innerHTML后。

希望能给出一些想法，无论如何。

来源

2008-10-04 15:45:28

在Firefox中渲染顺序

回答

相关问题