Электрон / jquery Добавление загрузки animated.gif в новое открывающееся окно (анимация останавливается) - PullRequest
Новая
       4

Электрон / jquery Добавление загрузки animated.gif в новое открывающееся окно (анимация останавливается)

0 голосов
/ 10 сентября 2018

У меня есть электронный проект, который открывает новое окно (файл index.html)

В открывшемся новом окне в теле я добавил animated.gif 

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title></title>

  <link rel="stylesheet" href="css/styles.css?v=1.0">

</head>

<body>

    <img id="loading" src="loading.gif" alt="" />


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $( document ).ready(function() {
        // code for loading stuff here..
        $('#loading').hide();

    });
</script>

</body>
</html>

Затем загружается остальная часть тела и заменяется .gif.

Моя проблема в том, что загрузка данных в теле настолько загружена, что анимация gif перестает работать.

Кто-нибудь знает, каким образом я могу избежать этого?

1 Ответ

0 голосов
/ 11 сентября 2018

Рассмотрите возможность использования CSS-анимации для достижения последовательности загрузки , которая выполняется независимо от потока пользовательского интерфейса (т. Е. Там, где выполняется ваш код JS / скрипта).

Простой CSS-спиннер, подобный этому, должен продолжать анимироваться, пока ваше приложение загружено во время запуска: 

@keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}

.loading {
  animation: spin 1s linear infinite;
  width:1rem;
  height:1rem;
  display:block;
  
  border: 4px solid red;
  border-top-color: transparent;
  border-radius: 50%;
}
<i class="loading"></i>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...