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

Question

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

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

因此,用户首先看到HTML select元素,然后看到它切换到漂亮的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;
}

小提琴中的工作演示

注意：我故意通过使用延迟了加载时间，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");

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