JQuery / Select2 宽度 = 100% 在负载时产生"flashes"，如何预防？

Question

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

但是最初显示mySelectBox和mySelectBox2的时间约为0.5-1秒，然后重新格式化为width=100%。因此，这是初始化/解析所需的时间。因此，这会导致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，简称FOUC，因为JS在与DOM交互之前必须等待DOM加载。这种轻微的加载延迟会导致您描述的Flash。

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

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

还要注意，如果将来需要添加任何其他select元素，可以在这两个元素上使用一个公共类，使选择器更简单，维护更容易。