我在我們的項目中使用頁面加載動畫。它由一個叫做Sprite Animate的javascript庫制作動畫。它動畫了一個精靈表，并使用ca nvas。它在桌面瀏覽器和Android設(shè)備上運行良好。然而，在IOS設(shè)備中，動畫在頁面加載之前很久就凍結(jié)了，當新頁面開始加載時，動畫很早就消失了。 它應該保持出現(xiàn)和動畫，直到新頁面加載，并應消失在新頁面加載之前，如在Android設(shè)備和桌面瀏覽器。 下面給出了Android和Ios的視頻樣本。 Android頁面加載動畫示例 https://youtu.be/s2LBIeTvz60 IOS頁面加載動畫示例 https://youtu.be/waowCrDWbbM

我試圖改變動畫配置，但什么都沒有改變。 我刪除了當前動畫，禁用了精靈動畫js庫，放了一個gif動畫來代替當前動畫。我得到了相同的結(jié)果，gif動畫在Ios設(shè)備中停止，就像上面的示例視頻一樣。

之后，我比較了Android和Ios設(shè)備在任何其他網(wǎng)站(尤其是表單提交響應稍長的網(wǎng)站)中的頁面動畫顯示行為。我意識到的是動畫在Ios設(shè)備中會更早地凍結(jié)和消失。

有人能解釋一下為什么Ios設(shè)備會出現(xiàn)這種模式嗎？Ios設(shè)備和其他設(shè)備在頁面加載上有區(qū)別嗎？我可以在哪里尋找這種差異并獲得相關(guān)知識？

下面給出了我們項目中頁面加載動畫的代碼。

在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';
    }
};

每當表單提交時，加載器動畫出現(xiàn)，表單動作完成后，它被隱藏。

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();
    });
}