0

我正在使用lunr.js在静态网站上运行客户端驱动的搜索。随着内容的增长，lunr.js 需要更长的时间来索引所有页面。这很好，但我想要一个动画加载栏，以便人们知道页面实际上正在做某事。我尝试添加一个动画twitter bootstrap 3.3.1 进度条，该进度条在索引完成加载之前可见，但在加载索引时它似乎没有动画。

这是现场示例：http ://rosindex.github.io/search/

在每个要索引的文档上运行的代码位于jquery.lunr.search.js#L87

package_search.html#L15中定义的进度条

这是引导程序渲染动画方式的限制，还是我可以做些什么来让它在加载这个索引时运行？

4

1 回答 1

1

虽然 lunr 正在索引浏览器，但它不能做任何其他事情，在你的情况下，包括正确地为进度条设置动画。

您可以尝试使用 web worker 对主 ui 线程执行索引。这就是 lunr 在 Angular 文档网站上的使用方式，有一篇很好的文章解释了这里的一些实现http://www.bacondarwin.co.uk/angularjs-docs-performance/

如果您的数据相当静态，您还可以考虑预先构建 lunr 索引。加载预先构建的索引要快得多，并且您应该不会看到索引锁定浏览器的问题。

您可以使用https://github.com/olivernn/lunr-index-builder从命令行构建索引，然后在浏览器中加载索引，如下所示：

var index = lunr.Index.load(serialised_index)
于 2014-12-11T21:46:22.340 回答