我有一个打开新窗口的 Electron 项目(一个 index.html 文件)
在正文打开的新窗口中，我添加了动画.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。
我的问题是 body 中数据的加载太忙以至于 gif 动画停止工作。
有谁知道我可以避免这种情况发生的任何方法吗？
最佳答案
考虑使用 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>关于javascript - Electron/jquery 将加载动画.gif 添加到新打开的窗口(动画停止)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52265415/