Javascript 抵消引导/选择2渲染延迟？

我在一个站点上使用引导，并在加载时使用以下代码将我的选择框变成下拉框

$("select").select2();

但是，当加载任何带有select下拉列表的页面时，会有一个短暂的延迟，在select2替换项被绘制之前可以看到原始页面。这是相当不和谐的，因为我的页面上的表单元素四处移动

有没有办法在我的后端（ASP MVC3）生成select2 HTML并将其写入页面，这样select2插件仍能正确连接所有行为

这里有一个例子

事实上，在页面呈现并更改页面外观之后，JavaScript在客户端上运行的任何时候都会发生错误。最好的办法是提前将更改最小化

严厉的方法是等到所有脚本都运行后再显示页面，但这对用户来说更糟糕

因此，缓解此问题的最佳方法是使本机元素的外观尽可能接近插件控件

要做到这一点，只需在javascript呈现控件之前将以下css添加到将应用的任何select元素中

/*隐藏前将样式应用于原始选择元素*/
选择。选择2{
颜色：#444；
背景色：#FFF；
边框：1px实心#AAA；
边界半径：4px；
框大小：边框框；
光标：指针；
显示：块；
高度：28px；
左侧填充：5px；
字体：未设置；
}

堆栈片段中的演示

$（'.select2'）.select2（）
正文{
显示器：flex；
弯曲方向：行；
}
div{
填充：15px；
显示器：flex；
弯曲方向：立柱；
}
标签{
字体大小：粗体；
}
挑选{
最小宽度：150px；
}
.选择2个主题{
颜色：#444；
背景色：#FFF；
边框：1px实心#AAA；
边界半径：4px；
框大小：边框框；
光标：指针；
显示：块；
高度：28px；
左侧填充：5px；
字体：未设置；
}

选择2
芥末
番茄酱
喜欢
选择2个主题
芥末
番茄酱
喜欢
默认选择
芥末
番茄酱
喜欢
我想要一个简单得多的答案。所有表单元素现在都有
style='display:none；'。在页面加载时，我只需执行
$（'form'）.show（）

这是任何
select2
命令的末尾，因此表单仅在其他所有内容都已呈现时才会显示

对于带有复选框的延迟加载表行，我设置
style='display:none；'，然后在特定结果“页面”的加载完成时显示这些复选框

select.select2{display: none}

适合我（至少是水平形式）。它只是隐藏搜索框，直到search2呈现它。
根据@roryok的回答，CSS首先呈现，因此最好的解决方案是隐藏表单，直到select2加载之后

但是，您应该使用
可见性：隐藏而非
显示：无
因此Select2可以在呈现自己的DOM附加项时访问表单输入宽度。
这很奇怪，因为我使用同一个控件，没有得到任何FOUC…但是我还将Select2设置为与
.form control
类非常相似的样式，因此我不会得到任何元素跳跃。作为一种选择，研究处理FOUC的方法。我希望我能得到更好的建议，希望比我聪明的人能帮上忙。问题的可能重复之处在于，select不能在每个浏览器中都设置样式。我想我可能只是把生成的HTML伪装成占位符，然后在select2触发时将其删除。也许我可以使用绝对定位将实际的select2分层到
fake
select2 HTMLI上，就像这样，它可以正常工作。不那么刺耳。但不知道它是否能更好地复制select2字体。该框复制得很好，但内容没有复制。@BerndWechner更新了该示例。Select2本身不会更改字体系列，但用户代理样式表实际上对
selects
vs
span
具有不同的CSS
font
属性，因此我将该值添加到
unset
中，这样它将返回浏览器默认值，从而停止显示select。否，它会停止显示，直到javascript呈现替换元素。在这种情况下，您需要澄清您所指的是CSS，并且需要
select.#my_id{display:none！important}
。它对FOUC有帮助，但对占位符高度没有帮助。