我有一个页面需要花费8到10秒钟来加载,因为服务器对外部服务进行API调用会导致一些大麻烦。提交表单后将调用此方法。
最初,我在叠加层中显示了一个CSS加载动画,以向用户显示页面实际上在做什么。
然后,我通过使用window.setTimeout()每2秒调用一些代码,更新进度栏并显示一条消息来说明系统正在执行的操作来增强此功能。当然是假的,但是当10秒钟内有4-5条消息要阅读时,它的时间似乎要短得多。
我的问题是超时无法在Safari中(在MacOS或iOS上)工作。它适用于所有其他浏览器,包括Mac上的Chrome。提交表单后,所有计时器似乎都已暂停(这也会影响横幅中的幻灯片显示)
有人遇到过这种情况,并且知道解决方法吗?我真的不想用AJAX替换标准表单提交,因为那样会涉及很多我们没有预算的重组。
答案 0 :(得分:0)
我知道这是一个非常特殊的用例,但是我最终使用CSS动画(带有关键帧)而不是setTimeout()来允许动画在导航开始后运行。
我偶然发现一个事实,即页面请求开始后,Safari中的大多数动画属性似乎都不起作用,但是任何“转换”属性都可以起作用。我不确定这可能是Safari浏览器错误。
因此,我使用了translateY,而不是“ top”,而使用了scaleX。