javascript - 当浏览器下载所需文件时,GIF 在启动画面中缓慢动画

标签 javascript angularjs animation gif animated-gif

我有一个 SPA(Angular 1.4.8)。 启动时,客户端必须下载许多文件,同时还要执行身份验证和引导。

因此我有一个启动画面,其中包含一个简单的 GIF 和根据当前加载阶段更新的几行文本。

我注意到 GIF 的平滑度取决于您打开页面的浏览器/计算机。 在速度非常快的计算机上,GIF 动画运行起来非常流畅,而在其他计算机上,速度较慢的计算机上,动画很粗糙(低 FPS)。

我假设这与加载我的应用程序时必须做很多事情的浏览器负载有关,导致 GIF 动画的 FPS 较低。 根据我的测试,这只是一个假设。

我该怎么做才能确保浏览器牺牲所有必需的资源来正确播放 GIF?

谢谢

最佳答案

不要使用 gif。使用像 these 这样的 CSS 动画微调器.像这样的 CSS 动画微调器不受执行 JS 和更新 UI 的浏览器主线程阻塞的影响。

但是,目前 Blink 上存在一个错误,该错误确实导致 CSS 动画微调器因主线程阻塞而暂停。

Google Chrome compositor-driven animation affected by jam in main thread

但这应该很快就会解决。

关于javascript - 当浏览器下载所需文件时,GIF 在启动画面中缓慢动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35874132/

相关文章:

javascript - $modal 弹出函数中的范围值未定义为对象

javascript - 拉斐尔圆弧动画正在变形而不是跟随圆弧路径

html - 如何使动画 Sprite (带有行和列)在 Firefox 中工作?

javascript - 无法通过angular JS访问部署在tomcat上的spring Rest web服务

javascript - GreenSock 动画未按预期工作

javascript - 我们可以在 og :image meta tag? 中使用 webp 扩展图像吗

javascript - 尝试制作 HTML 表格并使用相同的 JSON 数据填充选择标签

Javascript/JQuery 如何从多个选择输入中获取文本

javascript - 使用 JQuery 在 Word Web 插件中选择文本

javascript - 带有生成字段的 Ng-repeat 提交表单