在运行计算密集型 JavaScript 脚本时显示基于 css 的动画

Showing a css-based animation while running a computationally-intensive javascript script

本文关键字：css 动画 显示 计算 运行 密集型 JavaScript 脚本      更新时间：2023-09-26

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

下面是一个实时示例：http://rosindex.github.io/search/

在每个

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

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

这是引导程序呈现动画方式的限制，还是我可以做些什么来允许它在加载此索引时运行？

当 lunr 索引时，浏览器无法执行任何其他操作，在您的情况下，这包括正确设置进度条的动画。

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

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

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

var index = lunr.Index.load(serialised_index)
相关文章：