Question

我有一个电子项目，它将打开一个新窗口（一个index.html文件）

在打开的新窗口中，我添加了animation.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动画停止工作。

有人知道吗，我可以避免这种情况的发生？

Answer 1

考虑使用CSS动画实现加载顺序that runs independently of the UI thread（即执行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>

Electron / jquery将加载的animation.gif添加到新的打开窗口中（动画停止）

1 个答案: