多个Bootstrap-select加载非常慢

时间:2014-04-29 15:22:56

标签: javascript jquery twitter-bootstrap bootstrap-select

当我尝试在网站上放置多个选项(超过20个)时,它会减慢jquery执行速度(使用停止/继续警报) - 是否有机会优化代码以加快加载速度 - 加载需要几分钟? / p>

示例代码

<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:

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

4 个答案:

答案 0 :(得分:4)

我也在使用bootstrap select。 这个技巧解决了我在页面加载时引导选择渲染延迟的问题:似乎在页面加载时,dom元素通常在selectpicker之前呈现,这使得CSS&#34; rescale&#34;这会造成可怕的影响。

通常selectpicker在第一次渲染时需要500ms,您可以在元素定义之后强制渲染,如下所示,避免这种延迟,如下所示:

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

猜它有帮助:))

答案 1 :(得分:2)

就我而言,简单服用

 $('.selectpicker').selectpicker();

$(document).ready(function() ...

答案 2 :(得分:0)

对我来说,js加载后立即强制渲染使select实际上立即出现,而不是等待整个页面加载:

<script src="~/assets/js/bootstrap-select.min.js"></script>
<script>
    $(".selectpicker").selectpicker();
</script>

答案 3 :(得分:-1)

对我来说,是引导程序冲突的问题。 我在 CMS Joomla 中使用它,所以从我这里加载 Bootstrap 与另一个(来自 CMS)冲突。 当我删除重复文件时 - 一切都开始正常

问候 OrdaSoft 团队