保持窗口隐藏，直到初始化完成

keep window hidden until init completes

本文关键字：初始化 窗口 隐藏      更新时间：2023-09-26

我正在创建一个具有重要初始化过程的窗口，我想将窗口隐藏起来，直到 init 完成。现在在我的js代码的开头，我在创建窗口后立即隐藏了窗口，然后在init完成后显示它。但是，当应用程序在窗口出现时启动时，这会产生不太令人愉悦的闪光，消失然后重新出现。

有没有办法在初始化运行时保持窗口不可见？

在没有看到您的代码的情况下，我最好的猜测是您需要在页面的 head 部分中使用 CSS 隐藏应用程序窗口。这样，在浏览器呈现页面之前，它就会被隐藏。尝试用Javascript隐藏窗口不会那么好。这是因为脚本在浏览器创建窗口之前无法隐藏窗口。因此，根据条件，用户可能会看到它在启动时闪烁。

下面的代码片段显示了如何使用 CSS 可见性属性执行此操作。或者，您也可以使用 display 属性。

显示，然后运行代码段进行尝试。 

setTimeout(function() {
  // some long init process here
  // make visible on ready
  window.spinner.style.display = 'none';
  window.app.style.visibility = 'visible';
}, 3000);
#app {
  height: 10em;
  visibility: hidden;
  background-color: white;
}
h3,
h4 {
  margin: 0;
  padding: 4px;
  color: white;
  background-color: steelblue;
}
#spinner {
  height: 100px;
  position: absolute;
}
body {
  background-color: lightgray;
}
<h3>Header</h3>
<div id="content">
  <img id="spinner" src="https://i.stack.imgur.com/kOnzy.gif">
  <div id="app">APPLICATION READY</div>
</div>
<h4>footer</h4>

我同意@jeff关于提供某种进度指标的观点。但是，创建默认情况下在Electron中隐藏的窗口的标准方法是在创建浏览器窗口时使用show选项：

const myWindow = new BrowserWindow({ show: false });

然后，当加载/处理完成后，您可以使窗口可见：

// this code runs in the renderer process
import { remote } from 'electron';
remote.getCurrentWindow().show();

首先使用 CSS 隐藏它。 显示：无或可见性：隐藏。

然后通过初始化后更改显示或可见性来使用 javascript 显示。

相关文章：