Question

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

$("select").select2();

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

有没有办法在我的后端（ASP MVC3）中生成select2 HTML并将其写入页面，以便select2插件仍能正确连接所有行为？

Answer 1

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

这是任何select2命令的结尾，因此只有在呈现其他所有内容时才会显示该表单。

对于带有复选框的延迟加载表格行的情况，我在复选框上设置了style='display:none;'，然后在特定页面的加载完成后显示它们＆＃39;结果

Answer 2

这里是similar question on preventing flickering with Bootstrap-Select。

事实是，在页面呈现并改变页面外观后，任何时候JavaScript在客户端上运行时都会发生Flash of Unstyled Content (FOUC)。您最好的选择就是提前尽量减少变更。

重要的方法是等待显示页面，直到所有脚本都运行，但这对用户来说更糟糕。

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

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

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

Stack Snippets中的演示

＆＃13;

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

＆＃13;

.custom {
  color: #444;
  background-color: #FFF;
  border: 1px solid #AAA;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 28px;
}

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet" />

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>

<h3>Styled</h3>
<select class="select2">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<h3>Custom Style</h3>
<select class="custom">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<h3>Un-Styled</h3>
<select >
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

＆＃13;

Answer 3

按照@roryok的回答，首先渲染CSS，所以最好的解决方案是隐藏表单，直到select2加载。

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

Answer 4

select.select2{display: none}

为我工作（至少以水平形式）。它只是隐藏搜索框，直到search2呈现它为止。

抵消bootstrap / select2渲染延迟？

4 个答案:

Stack Snippets中的演示