bootstrap-select is slow

Created on 25 Apr 2017 · 15Comments · Source: snapappointments/bootstrap-select

Hello

How to load bootstrap-select so that it is loaded faster? Because it takes 1 second before loading my select, it is relatively long.

performance

Source

Machou

👍2

Most helpful comment

I fixed the rendering delay by loading only jQuery and Bootstrap-Select in the <head> and the rest of the JS including Bootstrap below the </body>, then just after each </select>, add this:

<script type="text/javascript">$('#myselect').selectpicker('render');</script>

Now all selects load before the page has finished rendering.

davidenco on 28 Jun 2017

👍3

All 15 comments

Same here. Everything else has loaded before the select, and even then it takes it 0.5 seconds to load. I only have half a dozen options in the list too!!

davidenco on 15 May 2017

I am having this issue as well. It is especially noticeable if you have many images or elements on the page, it seems to wait for them all to finish loading before it shows the select.

phil-a on 28 Jun 2017

I fixed the rendering delay by loading only jQuery and Bootstrap-Select in the <head> and the rest of the JS including Bootstrap below the </body>, then just after each </select>, add this:

<script type="text/javascript">$('#myselect').selectpicker('render');</script>

Now all selects load before the page has finished rendering.

davidenco on 28 Jun 2017

👍3

I too have the same issue. I did what davidenco suggested and it is fixed.

bigalnz on 7 Aug 2017

While the rendering of the selects after davidenco fix helped, now when I use the select and pick a option it is slow to close the menu.

bigalnz on 1 Oct 2017

Only is enough, hope we see the improvement next release

traycho-zz on 15 Oct 2017

👍2

same problem.fixed by
$(function(){ $(".selectpicker").selectpicker('render'); })

AdamFu on 31 Jul 2018

Or this?

$({$(".selectpicker").selectpicker('render');});

davidenco on 31 Jul 2018

Thank you so much..!

avilas on 7 Feb 2019

Note to self:

Use document.ready instead of window.load to auto-initialize bootstrap-select.

caseyjhol on 5 Mar 2019

👍1

have more than 30 select boxes in my page. Each select box has around 300+ options. So we staretd using this select picker to allow user to quickly type and pick the one. However, now its making lots of performance issues and we are in trouble now.

This select box has been created as reusuable angular component and we apply selectpicker in once the view was initialized using ### ngAfterViewInit

Each of them may or may not have a initial value set

 ngAfterViewInit() {
  jQuery("#mySelect10").selectpicker();
  jQuery("#mySelect10").selectpicker('val', 10); // sets the value, if it is present, ex 10 is value here
}

I tried with but still no change. Takes more time to load the page

 ngAfterViewInit() {
  jQuery("#mySelect10").selectpicker('render');
  jQuery("#mySelect10").selectpicker('val', 10); // sets the value, if it is present, ex 10 is value here
}

In IE 11, it is even very slow. User has to wait for nearly 30 seconds to see the view/UI.

@caseyjhol Is there any workaround on this performance issue? The plugin looks really great, except this performance issue

I tired updated to version 1.13.10, but still no luck :(