Порядок рендеринга в Firefox
Я создаю компонент диаграммы на JavaScript. Он имеет два слоя, визуализируемых отдельно: передний план и задний план.
Чтобы определить необходимый размер фона:
- визуализировать передний план
- измерить высоту результата
- визуализировать передний план и фон вместе
В коде это выглядит так:
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 еще не завершен.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы никогда не должны полагаться на то, что что-то, что вы только что вставили в DOM, отображается следующей строкой кода. Все браузеры в некоторой степени группируют эти изменения вместе, и может быть сложно определить, когда и почему.
Лучший способ справиться с этим - выполнить вторую часть в ответ на какое-то событие. Хотя не похоже, что есть хороший вариант, который вы можете использовать в этой ситуации, поэтому, если это не удается, вы можете запустить вторую часть с помощью:
setTimeout(renderBackground, 0)
Это обеспечит завершение текущего потока до выполнения второй части кода.
Я не думаю, что вам нужен 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.
В любом случае, надеюсь, что это дает некоторые идеи.