抵消引导/选择2渲染延迟？答案

【问题标题】：Counteract a bootstrap / select2 rendering delay?抵消引导/选择2渲染延迟？
【发布时间】：2015-07-03 04:28:24
【问题描述】：

我在网站上使用引导程序，并在加载时使用以下代码将我的选择框变成 select2 下拉菜单

$("select").select2();

但是，当任何带有 select 下拉菜单的页面加载时，在绘制 select2 替换之前可以看到原始页面会有一个短暂的延迟。当我页面上的表单元素四处移动时，这非常不和谐。

有没有办法在我的后端 (ASP MVC3) 中生成 select2 HTML 并将其写入页面，这样 select2 插件仍将正确连接所有行为？

【问题讨论】：

这很奇怪，因为我使用相同的控件并且没有得到任何 FOUC ......但我也有 select 2 的样式很像 .form-control 类，所以我不会得到任何元素的跳跃。作为一种选择，研究处理 FOUC 的方法。我希望我有更好的建议，希望比我聪明的人能够提供帮助。
Bootstrap-select plugin: how to avoid flickering的可能重复

标签： javascript jquery twitter-bootstrap asp.net-mvc-3 jquery-select2

【解决方案1】：

我选择了一个稍微简单的答案。所有表单元素现在都有style='display:none;'。在页面加载时，我只需执行 $('form').show()

这是在任何select2 命令的末尾，因此该表单仅在其他所有内容都已呈现时出现。

对于带有复选框的延迟加载表行，我在复选框上设置style='display:none;'，然后让它们在特定“页面”结果的加载完成时显示。

【讨论】：

【解决方案2】：

事实上，在页面呈现并更改页面外观之后，只要 JavaScript 在客户端上运行，Flash of Unstyled Content (FOUC) 就会发生。最好的办法是提前尽量减少更改。

严厉的方法是等到所有脚本都运行后才显示页面，但这对用户来说更糟糕。

作为Roryok suggested，缓解此问题的最佳方法是将本机元素的外观设置为尽可能接近插件控件。

为此，只需将以下 css 添加到将在 javascript 呈现控件之前应用的任何选择元素。

/* apply styles to original select element before hidden */
select.select2{
  color: #444;
  background-color: #FFF;
  border: 1px solid #AAA;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 28px;
  padding-left: 5px;
  font: unset;
}

堆栈片段中的演示

$('.select2').select2();

body {
  display: flex;
  flex-direction: row;
}

div {
  padding: 15px;
  display: flex;
  flex-direction: column;
}

label {
  font-weight: bold;
}

select {
  min-width: 150px;
}

.select2-theme {
  color: #444;
  background-color: #FFF;
  border: 1px solid #AAA;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 28px;
  padding-left: 5px;
  font: unset;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.js"></script>


<div >
  <label>Select 2</label>
  <select class="select2">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>

</div>

<div>
  <label>Select2 Themed</label>
  <select class="select2-theme">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
</div>

<div>
  <label>Default Select</label>
  <select >
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>  
</div>

【讨论】：

这个问题是选择不能在每个浏览器AFAIK中设置样式。我想我可能只是将生成的 HTML 伪造为占位符，然后在 select2 触发时将其删除。也许我可以使用绝对定位将实际的 select2 放在 fake select2 HTML 上
我喜欢这个，而且有点用。不那么刺耳。但是想知道它是否可以更好地复制 select2 字体。盒子复制得很好，内容不是。
@BerndWechner，更新了示例。 Select2 本身并没有改变字体系列，但用户代理样式表实际上具有不同的 CSS font selects 与 spans 属性所以我将值添加到 unset 所以它将返回到浏览器默认值跨度>

【解决方案3】：

select.select2{display: none}

对我有用（至少以水平形式）。它只是隐藏搜索框，直到 search2 呈现它。

【讨论】：

这将完全停止显示选择。
不，它会停止显示，直到 javascript 呈现替换元素
在这种情况下，您需要澄清您指的是 CSS，并且您需要 select.#my_id{display: none !important}。它对 FOUC 有帮助，但对占位符高度没有帮助。

【解决方案4】：

根据@roryok 的回答，首先呈现 CSS，因此最好的解决方案是隐藏表单，直到 select2 加载后。

不过，您应该使用visibility:hidden; 而不是display:none;，这样Select2 在呈现自己的DOM 插件时可以访问表单输入宽度。

【讨论】：

【解决方案5】：

最好最简单的答案：

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

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

【讨论】：