我在我们的项目中使用页面加载动画。它由一个叫做Sprite Animate的javascript库制作动画。它动画了一个精灵表，并使用ca nvas。它在桌面浏览器和Android设备上运行良好。然而，在IOS设备中，动画在页面加载之前很久就冻结了，当新页面开始加载时，动画很早就消失了。 它应该保持出现和动画，直到新页面加载，并应消失在新页面加载之前，如在Android设备和桌面浏览器。 下面给出了Android和Ios的视频样本。 Android页面加载动画示例 https://youtu.be/s2LBIeTvz60 IOS页面加载动画示例 https://youtu.be/waowCrDWbbM

我试图改变动画配置，但什么都没有改变。 我删除了当前动画，禁用了精灵动画js库，放了一个gif动画来代替当前动画。我得到了相同的结果，gif动画在Ios设备中停止，就像上面的示例视频一样。

之后，我比较了Android和Ios设备在任何其他网站(尤其是表单提交响应稍长的网站)中的页面动画显示行为。我意识到的是动画在Ios设备中会更早地冻结和消失。

有人能解释一下为什么Ios设备会出现这种模式吗？Ios设备和其他设备在页面加载上有区别吗？我可以在哪里寻找这种差异并获得相关知识？

下面给出了我们项目中页面加载动画的代码。

在Html文件中，有一个加载元素

<div id="loader" class="loading" style="display: none">
 <img id="imgLogo" hidden="true"th:src="@{...../loading.png}"/>
 <canvas id="spinner"></canvas>
</div>

动画配置js文件。Show hide方法基本上改变了加载器元素的Css样式，并使其显示/消失

import $ from 'jquery';
import "./sprite-animate";

const SHOW_TIMEOUT = 200;
let loader;
let timer;
let loaderCount = 0;

$(document).ready(() => {
    var $canvas = $('#spinner');
    var absPath = $('#imgLogo').prop('src');
    $canvas.spriteAnimate({
        frameWidth: 300,
        frameHeight: 300,
        numberOfFrames: 50,
        imgSrc: absPath,
        fps: 40,
        loop: true
    });
    $canvas.spriteAnimate('play');
    loader = document.getElementById('loader');
    loaderCount = 0;
});

export const show = () => {
    if (!loader)
        return;
    loaderCount++;
    timer = setTimeout(() => {
        loader.style.display = '';
    }, SHOW_TIMEOUT);
};

export const hide = () => {
    if (!loader)
        return;
    if(loaderCount!==0){
        loaderCount--;
    }
    if (loaderCount === 0) {
        clearTimeout(timer);
        loader.style.display = 'none';
    }
};

每当表单提交时，加载器动画出现，表单动作完成后，它被隐藏。

export default function basket() {
    let formSubmitState = false;

    $(document).find("form").one('submit', function (e) {
        loader.show();
    });

    $(document).find("form").bind('ajax:complete', function () {
        loader.hide();
    });
}