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

Posted 2023-02-22

【中文标题】Bootstrap-select 插件：如何避免闪烁

【英文标题】：Bootstrap-select plugin: how to avoid flickering

【发布时间】：2014-06-08 17:03:17

【问题描述】：

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

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

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

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

【问题讨论】：

可能是像select visibility:hidden; 这样的CSS定义？

你能发布你的代码吗？在查看网站时（除了 js 等...），您只是在使用他的自定义类创建一个选择元素？

这是我要修复的页面：audioblocks.com/search/?srch-type=music 代码并不多。渲染页面。在必要的选择元素上调用 selectpicker() 函数。

【参考方案1】：

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

select 
   visibility: hidden;

【讨论】：

在我的例子中，select 实际上是在 Bootstrap 启动并影响它周围的元素之后改变了它的位置，所以visibility: hidden; 不足以掩盖这种效果。我不得不使用display: none; 完全隐藏它。

【参考方案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

【讨论】：

谢谢！我要测试一下。

@user3565737，还记得为您认为有帮助的任何答案点赞，并接受任何最能解决您在 Stack Overflow 上发布的问题的答案。

当前对 Bootstrap 4.5 和 bootstrap-select 1.13.* 的修复是 height: 38px;

【参考方案3】：

在替换之前使用size 限制select 的高度：

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

围绕这个属性的规范说：

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

【讨论】：

它做得很好：D

【参考方案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>

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

【参考方案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 初始化后呈现）。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review