Плагин Bootstrap-select: как избежать мерцания

Плагин Bootsrap-select поражает (http://silviomoreto.github.io/bootstrap-select/). Это обеспечивает чрезвычайно простой способ создания великолепных меню выбора в Bootstrap. Однако одна проблема, с которой я столкнулся, - это "мерцание" при загрузке страницы. Я имею в виду, что это довольно прямолинейно:

Загрузка страницы с помощью исходного элемента HTML select (который, конечно, выглядит как дерьмо)
Плагин Bootstrap-select JS запускает
В какое-то заметное время после загрузки страницы исходный элемент выбора HTML преобразуется в хороший элемент выбора Bootstrap с помощью JS на шаге (2).

Итак, пользователь сначала видит элемент выбора HTML, а затем видит, что он переключается на элемент выбора Bootstrap, поэтому "мерцает".

Кто-нибудь нашел хорошее решение проблемы?

Ответ 1

Чтобы отобразить пробел до загрузки загрузочного буфера, добавьте его в свой css.

select {
   visibility: hidden;
}

Ответ 2

Там нет отличного способа предотвратить все мерцание, но вы можете свести его к минимуму.

Проблема заключается в том, что в дополнение к любым другим узким местам, которые у вас есть, сначала необходимо загрузить и проанализировать множество файлов javascript. Bootstrap-Select зависит от Bootstrap, который сам зависит от jQuery. К тому времени, когда весь этот javascript будет загружен, страница, вероятно, уже отображена.

Одна вещь, которую вы можете сделать, чтобы минимизировать мерцание, - это стиль элементов select как можно более близкий к конечному продукту, поэтому они занимают одинаковое пространство экрана. Когда загружается плагин, он все равно скроет этот элемент управления и заменит его собственной реализацией. Используйте селектор, который вы собираетесь передать в функцию selectpicker(), и выполните следующие действия:

.selectpicker {
    width: 220px;
    height:34px;
    margin-bottom: 10px;
}

Рабочая демонстрация в скрипте

Примечание. Я намеренно задерживал время загрузки с помощью setTimeout, поэтому разница более заметна.

setTimeout(function() { $(".selectpicker").selectpicker(); }, 500);

Если это действительно все еще неприемлемо, вы можете отобразить графику загрузки, пока страница не будет полностью загружена.
Адаптировано из Пример экрана загрузки:

Добавьте это в свой HTML:

<div id="loader"></div>

Стиль в CSS:

#loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('http://i.imgur.com/ntIrgYXs.gif') 50% 50% no-repeat grey;
}

И удалите его со следующим JavaScript после того, как вы загрузили свою страницу:

$("#loader").fadeOut("slow");

Рабочая демонстрация загрузки экрана в скрипте

Ответ 3

Это решение работает для меня:

<select class="selectpicker">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

<script>
    $('.selectpicker').selectpicker({  
        width: '100%'
    });
</script>

Я просто разместил script сразу после создания раскрывающегося списка select, вместо того, чтобы ждать, пока документ будет готов!

Ответ 4

Используйте size, чтобы ограничить высоту select, прежде чем она будет заменена:

<select size="1">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

Спецификация вокруг этого атрибута говорит:

'size' Определяет количество видимых параметров в раскрывающемся списке