Bootstrap-select插件：如何避免闪烁
Bootsrap-select插件很棒（ http://silviomoreto.github.io/bootstrap-select/ ）。 它提供了一种在Bootstrap中创建华丽选择菜单的简单方法。 然而，我遇到的一个问题是页面加载时“闪烁”。 我的意思是相当直接的：
- 页面加载原始HTML选择元素（当然看起来像垃圾）
- Bootstrap-select插件JS运行
- 在页面加载后的某个明显时间，原始HTML select元素在步骤（2）中被JS转换为一个很好的Bootstrap-select元素。
因此，用户首先看到HTML select元素，然后看到它切换到漂亮的Bootstrap-select项，因此“闪烁”。
有谁找到了解决问题的好方法？
要在加载bootstrap-select之前显示空白，请将其添加到css中。
select { visibility: hidden; }
没有一种很好的方法来防止闪烁在一起，但你可以最小化它。
问题是，除了你遇到的任何其他瓶颈外，你必须先下载并解析很多javascript文件。 Bootstrap-Select取决于Bootstrap ，它本身依赖于jQuery 。 加载所有javascript时，页面可能已经呈现。
您可以做的最小化闪烁的方法是将select元素设置为与最终产品类似，以便它们占用相同数量的屏幕空间。 当插件加载时，它将隐藏此控件并将其替换为它自己的实现。 使用你要传递给selectpicker()函数的选择器和样式如下：
.selectpicker { width: 220px; height:34px; margin-bottom: 10px; }
在小提琴中工作演示
注意：我故意通过使用setTimeout延迟加载时间，因此差异更明显。
setTimeout(function() { $(".selectpicker").selectpicker(); }, 500);
如果这仍然是不可接受的，您可以显示加载图形，直到页面完全加载。
改编自加载屏幕示例 ：
将其添加到您的HTML：
在CSS中将它设置为样式：
#loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('http://i.imgur.com/ntIrgYXs.gif') 50% 50% no-repeat grey; }
在加载页面后，使用以下JavaScript删除它：
$("#loader").fadeOut("slow");
加载屏幕的工作演示在小提琴
这个解决方案对我有用：
我只是在创建选择下拉列表后立即放置脚本，而不是等待文档准备好！
在更换之前，使用size来限制select的高度：
该属性的规范说：
‘size’定义下拉列表中的可见选项数