JQuery / Select2 width = 100% 在加载时创建“闪烁”，如何防止？

Question

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

但是最初大约 0.5-1 秒，在重新格式化为 width=100% 之前，它会依次显示 mySelectBox 和 mySelectBox2。所以这是它需要初始化的时间/解析。所以这会导致“闪烁”的用户界面。

如何防止这种情况发生？

<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%;
}

另外请注意，如果您将来需要添加任何更多 select 元素，您可以在这两个元素上使用公共类，以使选择器更简单和维护更容易。