在DOM交互期间暂停布局

Question

在Javascript中，我正在清除DIV的内容，然后重新填充它，有没有办法暂停这些元素的布局或锁定UI，直到我完成对HTML的删除？我不希望弹出任何消息，我只是不想在删除/添加项目时看到闪烁。

Answer 1

在将新元素的内容插入实际文档之前，您可以在DocumentFragment中构建新元素：

var fragment = document.createDocumentFragment();
// build node in fragment

var div = /* … */; // DIV that should be replaced
div.parentNode.replaceChild(fragment, div);

Answer 2

通过将style属性添加到display：none来隐藏它，然后执行这些操作，然后重新显示div

Answer 3

唯一建议可以是整体更新div内容，方法是构建整个内容html，然后立即将其添加到div innerHTML中，相反将div中的元素逐个添加到div中，计算代价更高它涉及每次重建dom树（这很容易导致闪烁）

Answer 4

我发现通过对div进行分类后应用固定高度，之前未设置高度，因此内容正在增长/缩小。

谢谢你的回答，哦，Doh！