13

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

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

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

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

4

5 回答 5

9

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

select {
   visibility: hidden;
}
于 2015-02-10T22:45:36.137 回答
7

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

问题在于，除了您遇到的任何其他瓶颈之外，您还必须首先下载并解析大量 javascript 文件。 Bootstrap-Select依赖于Bootstrap，而 Bootstrap 本身依赖于jQuery。当所有的 javascript 被加载时，页面可能已经被渲染了。

您可以做的一件事是尽量减少闪烁，使select元素的样式尽可能与最终产品相似，以便它们占用相同数量的屏幕空间。当插件加载时，它无论如何都会隐藏这个控件并用它自己的实现替换它。使用您要传递给selectpicker()函数和样式的选择器，如下所示：

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

小提琴中的工作演示

截屏

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

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

如果这仍然不可接受，您可以显示加载图形，直到页面完全加载。
改编自加载屏幕示例：

将此添加到您的 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");

小提琴中加载屏幕的工作演示

于 2014-04-25T00:48:40.103 回答
3

用于限制, 在被替换之前size的高度：select

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

围绕此属性的规范说：

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

于 2015-07-08T05:32:33.403 回答
2

这个解决方案对我有用：

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

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

于 2014-05-08T23:05:38.690 回答
1

最好和最简单的答案：

将现有的 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 初始化后呈现）。

于 2021-12-06T18:27:09.220 回答