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

Question

Bootsrap-select 插件很棒 (http://silviomoreto.github.io/bootstrap-select/)。它提供了一种在 Bootstrap 中创建华丽的选择菜单的极其简单的方法。然而，我遇到的一个问题是页面加载时“闪烁”。我的意思是相当直截了当：

1. 页面加载原始 HTML 选择元素（当然看起来像废话）
2. Bootstrap-select 插件 JS 运行
3. 在页面加载后的某个明显时间，原始 HTML 选择元素在第 (2) 步中被 JS 转换为漂亮的 Bootstrap-select 元素。

因此，用户首先看到 HTML 选择元素，然后看到它切换到漂亮的 Bootstrap-select 项，因此“闪烁”。

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

Answer 1

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

select {
   visibility: hidden;
}

Answer 2

没有很好的方法来防止闪烁，但您可以将其最小化。

问题在于，除了您遇到的任何其他瓶颈之外，您还必须首先下载并解析大量 javascript 文件。 Bootstrap-Select 依赖于 Bootstrap，而 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>

围绕这个属性的规范说：

'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>

我只是在创建选择下拉菜单后立即放置脚本，而不是等待文档准备好！

Answer 5

最好最简单的答案：

将现有的 Bootstrap 类 invisible 添加到标记页面上的 Select 对象中，无论是 HTML Input 元素还是 HTML Select 元素：https://getbootstrap.com/docs/5.1/utilities/visibility/

例如

<input class="visible">...</div>
<input class="invisible">...</div>

这可以防止 HTML 版本的 Select/DDL 对用户可见，同时保留 SELECT 将占用的布局空间（在 bootstrap-select JS 初始化后呈现）。