避免由javascript逐步增强导致的DOM元素闪烁？

Question

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

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

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

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

没有Javascript：

所以就是这种情况，到目前为止我看到的关于渐进增强的东西只是为闪烁的dom元素添加一些CSS，但由于这是一个转换，我想在某个地方渲染一些东西它应该是。

使用Javascript：

我希望很清楚我在这里想要实现的目标，任何好的解决方案？我应该作为占位符在场所上呈现正常的下拉列表，然后在DOM准备好后替换它吗？在这种情况下如何处理no-js案例？该网站需要向所有人开放。

Answer 1

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