Bootstrap-select插件：如何避免闪烁

Question

Bootsrap-select插件很棒（http://silviomoreto.github.io/bootstrap-select/）。它提供了一种在Bootstrap中创建华丽选择菜单的简便方法。然而，我遇到的一个问题是＆＃34;闪烁＆＃34;在页面加载。我的意思是相当直接的：

1. 页面加载原始HTML选择元素（当然看起来像垃圾）
2. Bootstrap-select插件JS运行
3. 在页面加载后的某个明显时间，原始HTML select元素在步骤（2）中由JS转换为一个很好的Bootstrap-select元素。

因此，用户首先看到HTML select元素，然后看到它切换到漂亮的Bootstrap-select项，因此＆＃34;闪烁＆＃34;。

有没有人找到解决问题的好方法？

Answer 1

要在加载bootstrap-select之前显示空白，请将其添加到您的css。

select {
   visibility: hidden;
}

Answer 2

没有一种很好的方法可以防止闪烁在一起，但你可以将它最小化。

问题是除了你遇到的任何其他瓶颈外，你必须先下载并解析很多javascript文件。 Bootstrap-Select 依赖于 Bootstrap ，它本身依赖于 jQuery 。加载所有javascript时，页面可能已经呈现。

尽量减少闪烁的一件事是将select元素设置为与最终产品类似，以便它们占用相同数量的屏幕空间。当插件加载时，它将隐藏此控件并将其替换为它自己的实现。使用您要传递到selectpicker()函数的选择器和样式，如下所示：

.selectpicker {
    width: 220px;
    height:34px;
    margin-bottom: 10px;
}

Working Demo in fiddle

注意：我故意使用setTimeout延迟加载时间，因此差异更明显。

setTimeout(function() { $(".selectpicker").selectpicker(); }, 500);

---

如果这仍然不可接受，您可以显示加载图形，直到页面完全加载为止 改编自Loading screen example：

将此添加到您的HTML：

<div id="loader"></div> 

在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");

Working Demo Of Loading Screen In Fiddle

Answer 3

在更换size之前，使用select来限制<select size="1"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> 的高度：

var_dump( $_SERVER['HTTP_USER_AGENT'] );

该属性的规范说：

  

'size'定义下拉列表中可见选项的数量

Answer 4

此解决方案适用于我：

<select class="selectpicker">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

<script>
    $('.selectpicker').selectpicker({  
        width: '100%'
    });
</script>

我只是在创建选择下拉列表后立即放置脚本，而不是等待文档准备就绪！