multiple Bootstrap-select loads very slow

Question

when i try to put multiple selects on website (more than 20) it slows down jquery execution (with stop/continue alert) - is there a chance to optimize the code to load it faster - it takes minutes to load?

sample code

<td><select class="selectpicker" name="ref[240][sub_class]">
<option value=0 selected="selected" >A</option>
<option value=1>B</option></select></td>
<td><select class="selectpicker" name="ref[265][sub_class]">
<option value=0>A</option>
<option value=1 selected="selected" >B</option></select></td>

javascript at the end of the file:

        $(document).ready(function() {
  $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 1
  });
});

Answer 1

I was working with bootstrap select too. This trick solved my problems about bootstrap-select rendering delays on page loading: it seems that on page load, dom element usually render before selectpicker, this is making the CSS "rescale" which cause an horrible effect.

Usually selectpicker takes 500ms for the first rendering, you can force the rendering after the element definition like following avoiding this delay like follow:

<select class="selectpicker" id="your_select">
   <option>...</option>
   ...
   <option>...</option>
</select>
<script>
   $("#your_select").selectpicker("render");
</script>

Guess it helps :)