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

Question

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

具体情况:我有一个具有多个选择的选择，它通过 jquery 插件转换为多选择下拉列表。但在页面加载时，它在插件运行之前呈现为多选。

现在我只是隐藏选择直到它被转换，但这会留下一个空白区域，下拉列表将显示在其中。

有什么好的办法避免这种闪烁吗？

没有 JavaScript:

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

使用 JavaScript:

我希望我在这里想要实现的目标很清楚，有什么好的解决方案吗？我应该在该位置渲染一个普通的下拉列表作为占位符，然后在 DOM 准备好时替换它吗？在这种情况下我该如何处理 no-js 情况？该网站需要向所有人开放。

Answer 1

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