IOS Проблема приложения WebView с отображением значка ожидания перед выгрузкой страницы - PullRequest
Новая
       11

IOS Проблема приложения WebView с отображением значка ожидания перед выгрузкой страницы

0 голосов
/ 06 апреля 2020

Я разработал веб-приложение, которое используется в WebView для IOS и Android. Чтобы улучшить взаимодействие с пользователем, я решил показать загрузочное изображение, когда пользователь нажимает на ссылку для навигации. Все работает как положено на P C или Android, но не на IOS. Там ничего не происходит. Не только анимация, но и само изображение никогда не появляется. Я проверил много вопросов и даже определил CSS свойство курсора.

Css & JavaScript: 

<style>
        a{cursor:pointer!important;}
        .waitlogo {
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            display: none;
            position: fixed;
            z-index: 99999;
        }

        .waitlogoimg {
            animation: pulse 1s infinite linear;
            -webkit-animation: pulse 1s infinite linear;
            position: absolute;            
            border: outset 5px white;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            width: 100px;
            height: 100px;
        }
        @keyframes pulse {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(359deg);
            }
        }
        @-webkit-keyframes pulse {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(359deg);
            }
        }
    </style>



<script>
        $('a').on("click",function () {
            var href = $(this).attr('href');
            if (href.startsWith('/') | href.startsWith('http')) {
                $("#waitLogo").show();

            }
        });
<script>

Html: 

   <div id="waitLogo" class="waitlogo">
        <div class="waitlogoimg"></div>
        <img src="/assets/img/logo100.png" />
    </div>
...