JQuery / Select2 width = 100% создает «вспышки» при нагрузке, как это предотвратить? - PullRequest
Новая
       15

JQuery / Select2 width = 100% создает «вспышки» при нагрузке, как это предотвратить?

1 голос
/ 29 апреля 2020

У меня есть страница JQuery / Select2 HTML с довольно большим количеством <option> с. Это работает очень хорошо.

Однако первоначально приблизительно в течение 0,5-1 секунды отображает mySelectBox и mySelectBox2 друг за другом перед переформатированием в width = 100%. Так что это время, которое нужно инициализировать / разобрать. Так что это вызывает «мигающий» интерфейс.

Как я могу предотвратить это? 

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

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

1 Ответ

2 голосов
/ 29 апреля 2020

Это известно как Fla sh неустановленного содержимого , или коротко FOU C, и происходит потому, что JS должен ждать загрузки DOM, прежде чем взаимодействовать с ним. Эта небольшая задержка загрузки вызывает описанный вами флаг sh.

Чтобы исправить это, используйте CSS, чтобы установить ширину этих элементов. Это работает, когда CSS применяется, поскольку элементы создаются в DOM без задержки. 

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

Также обратите внимание, что вы можете использовать общий класс для обоих этих элементов, чтобы сделать селектор более простым и обслуживать проще, если вам понадобится добавить еще select элементов в будущем.

...