JQuery / Select2 width = 100% creates "flashes" on load，如何防止？

Question

我有一个 JQuery / Select2 HTML 页面，其中有很多 <option>。这真的很好用。

但是最初显示 mySelectBox 和 mySelectBox2 大约 0.5-1 秒，然后重新格式化为 width=100% 开始。所以这就是它需要 initalize/parse 的时间。所以这导致 'flashing' UI。

我该如何防止这种情况发生？

<label ..> 
   <select id="mySelectBox"> 
     ...
   </select>
</label>
<label>
   <select id="mySelectBox2">  
   </select>
</label>

$(document).ready(function() {
    $('#mySelectBox').select2({width: '100%'"});
    $('#mySelectBox2').select2({width: '100%'"});
}

Answer 1

这被称为 Flash of unstyled content，或简称为 FOUC，这是因为 JS 在与其交互之前必须等待 DOM 加载。轻微的加载延迟会导致您描述的闪光灯。

要解决此问题，请使用 CSS 来设置这些元素的宽度。这适用于 CSS，因为元素是在 DOM 中创建的，没有延迟。

#mySelectBox,
#mySelectBox2 {
  width: 100%;
}

另请注意，您可以在这两个元素上使用通用的 class 以使选择器更简单，并且如果您将来需要添加任何其他 select 元素，维护起来也更容易。

JQuery / Select2 width = 100% creates "flashes" on load，如何防止？

JQuery / Select2 width = 100% creates "flashes" on load, how to prevent?

jquery

jquery-select2