Question

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

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

Answer 1

我最好的猜测是，您需要在页面的head部分使用CSS隐藏应用程序窗口，而无需查看代码。这种方式在浏览器呈现页面之前隐藏。试图用Javascript隐藏窗口不会很好地工作。这是因为脚本无法在浏览器创建窗口之前隐藏窗口。因此，根据条件，用户可能会在启动时看到它闪烁。

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

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

＆＃13;

setTimeout(function() {

  // some long init process here

  // make visible on ready
  window.spinner.style.display = 'none';
  window.app.style.visibility = 'visible';
}, 3000);

＆＃13;

#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;
}

＆＃13;

<h3>Header</h3>
<div id="content">
  <img id="spinner" src="http://i.stack.imgur.com/kOnzy.gif">
  <div id="app">APPLICATION READY</div>
</div>
<h4>footer</h4>

＆＃13;

Answer 2

首先使用CSS隐藏它。 display：none或visibility：hidden。

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

Answer 3

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

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

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

// this code runs in the renderer process
import { remote } from 'electron';

remote.getCurrentWindow().show();

保持窗口隐藏，直到init完成

3 个答案: