避免javascript渐进增强导致的DOM元素闪烁？答案

【问题标题】：Avoid flickering DOM elements caused by progressive enhancement by javascript?避免javascript渐进增强导致的DOM元素闪烁？
【发布时间】：2016-05-17 12:07:49
【问题描述】：

在我的 javascript 将其转换为另一种类型的元素之前，如何避免闪烁未增强的 DOM 元素？

具体而言：我有一个带有多个选项的选择，它通过 jquery-plugin 转换为多选项下拉菜单。但是在页面加载时，它会在插件运行之前呈现为多选。

现在我只是隐藏选择直到它被转换，但这会留下一个空白空间，下拉菜单会显示出来。

有什么好的方法可以避免这种闪烁吗？

没有 Javascript：

所以情况就是这样，到目前为止我所看到的关于渐进增强的事情只是向闪烁的 dom 元素添加一些 CSS，但由于这是一种转换，我想在应该是的。

使用 Javascript：

我希望很清楚我想要在这里实现什么，有什么好的解决方案吗？我是否应该在该位置呈现一个正常的下拉菜单作为占位符，然后在 DOM 准备好时替换它？在这种情况下如何处理 no-js 情况？该网站需要对所有人开放。

【问题讨论】：

您是否尝试在文档准备好之前运行“选择转换脚本”？（不确定是否建议这样做）
这可能行得通，但我想在中运行尽可能少的脚本
你不必总是把它放在头上，REF stackoverflow.com/questions/7186914/…
我已将我的 cmets 更改为答案
您可以克隆选择对象，对其进行任何增强，一旦准备好，替换“可见”的选择元素。

标签： javascript html css progressive-enhancement

【解决方案1】：

如果您调整布局以使多选像其他所有内容一样位于标签下方，然后克隆选择，在内存中重建它，然后按照@elad.chen 的建议将其交换（可能通过元素或整个表单），您应该减少不和谐的闪烁。您还可以使用过渡平滑地交换两者：缩小多选的高度，然后使用不透明度交换或淡出和淡入。

【讨论】：