Анимация загрузки страницы останавливается анимация задолго до загрузки страницы на устройствах IOS - PullRequest
Новая
       5

Анимация загрузки страницы останавливается анимация задолго до загрузки страницы на устройствах IOS

0 голосов
/ 05 февраля 2020

Я использую анимацию загрузки страницы в нашем проекте. Он был оживлен библиотекой javascript под названием Sprite Animate. Он оживляет спрайт и использует холст. Он хорошо работает на настольных браузерах и устройствах 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();
    });
}
...