如何让CSS动画等待在JQuery或Page加载后加载

我构建了一个使用CSS关键帧运行的SVG动画。它在桌面上效果很好，但是当它运行在速度较慢的移动设备上时，加载页面时动画即将结束。如何让CSS动画等待在JQuery或Page加载后加载

问题是我正在使用CSS（动画延迟：3s），但该页面需要大约4秒钟才能加载，因此在加载时我的动画已经开始。我需要页面完全加载和我的jquery在CSS动画开始之前加载！

基本上，在CSS动画延迟属性运行之前，如何获取页面以完全加载，或者如何在加载完jQuery文档之后运行它。

2017-08-30 Staveven

你可以删除类'你使用应用动画元素'＃bar'和使用jQuery函数要么.foo'：1 ** - **添加类'包含.foo '元素'＃bar'或者** 2 - **在页面加载后通过'.css（）'添加动画属性。 –

这实际上是我第一次做的，它运作良好。但是，然后在较慢的设备上，Jquery会在页面完全准备好之前加载，我也会遇到同样的问题。所以我想我需要某种Javascript或JQuery，ACTUALLY会在发射前等待每个元素加载。虽然欣赏评论。 – Staveven

阅读[** here **]（https://stackoverflow.com/a/45497385/2159528），了解各种可能的“就绪”事件。 –

我对如何做到这一点有几点想法。

您可以将动画设置为5秒后加载。

或者，创建一个轻量级的移动版本。或者拿出加载页面加载时间的影响。使用最小版本。

编辑：尝试（动画延迟：5）取决于移动像素。

@media (min-width: 576px) { 

}

来源

2017-08-30 05:10:49

我已经这样做了，但问题是每个手机的加载都不一样。如果我加载得太早，它会混乱起来。如果我加载得太晚，它会混乱起来。我想我正在寻找能够同时在桌面和移动设备上触发的东西。 – Staveven

我有另一个想法Staveven。由于需要一段时间才能加载。我会建议在缩小版本的服务器上加载它。我这样说的原因是，我一段时间后遇到了同样的问题。我所做的就是加载所需的所有资源，以显示我从我的网站上需要的资源。它不再需要下载资源或从外部源获取资源。所以我的页面速度增加了。此外，在顶部我有同样的问题。我正在加载不必要的资源。你有没有尝试从服务器的页面底部加载js？ –

这也是一个好主意。我最终做的就是使用jquery添加/删除类以精确的时间间隔触发CSS。基本上我删除了CSS动画延迟，以避免等待DOM完成加载。 – Staveven

如何让CSS动画等待在JQuery或Page加载后加载

回答

相关问题