Отображение анимации на основе css при выполнении скрипта javascript с интенсивными вычислениями

Я использую lunr.js для выполнения поиска на стороне клиента на статическом веб-сайте. По мере роста контента lunr.js требуется больше времени для индексации всех страниц. Это хорошо, но я хотел бы иметь анимированную полосу загрузки, чтобы люди знали, что страница действительно что-то делает. Я попытался добавить анимированный индикатор выполнения twitter bootstrap 3.3.1, который будет виден до завершения загрузки индекса. , но, похоже, он не анимируется во время загрузки индекса.

Вот живой пример: http://rosindex.github.io/search/

Код, который выполняется для индексации каждого документа, находится в jquery.lunr.search.js#L87

Индикатор выполнения, определенный в package_search.html#L15< /а>

Является ли это ограничением того, как загрузчик отображает анимацию, или я могу что-то сделать, чтобы она работала во время загрузки этого индекса?


javascript twitter-bootstrap css-animations progress-bar client-side-scripting
person jbohren    schedule 10.12.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Пока lurn индексирует, браузер не может делать ничего другого, включая, в вашем случае, правильную анимацию индикатора выполнения.

Вы можете попробовать выполнить индексацию основного потока пользовательского интерфейса с помощью веб-работника. Вот как используется lunr на сайте документации Angular, здесь есть хорошая статья, объясняющая некоторые реализации http://www.bacondarwin.co.uk/angularjs-docs-performance/

Если ваши данные довольно статичны, вы также можете предварительно создать индекс lurr. Загрузка предварительно созданного индекса выполняется намного быстрее, и вы не должны увидеть проблем с блокировкой браузера при индексировании.

Вы можете использовать https://github.com/olivernn/lunr-index-builder для создание индекса из командной строки, а затем загрузка индекса в браузере следующим образом:

var index = lunr.Index.load(serialised_index)
person Oliver Nightingale    schedule 11.12.2014
comment
Это прекрасно работает, хотя мне пришлось исправить ошибку в lunr-index-builder (ожидание PR): rosindex. github.io/поиск - person jbohren; 17.12.2014