完全加载后显示窗口

Question

当我创建基本应用程序并使用electron命令初始化它时,它会向我显示一个空白窗口,稍后加载内容.

在内容完全加载后,应该使用哪个事件和哪个对象来显示窗口？

did-finish-load在一个window.webContent对象上？或许dom-ready？或者别的什么？

app.js:

var app = require('app'),
    Window = require('browser-window'),
    mainWindow = null;

require('crash-reporter').start();

app.on('ready', function() {
   mainWindow = new Window({ width: 600, height: 400, show: false });

   mainWindow.loadUrl('file://' + __dirname + '/index.html');
   mainWindow.show();

   //
   // mainWindow.webContent.on('did-finish-load', function() {
   //     something like that is a proper way?
   // });
   //
});

Answer 1

好的,我自己找到了答案.正确的事件是did-finish-load,应该像这样使用:

var Window = new BrowserWindow({ width: 600, height: 400, show: false });
Window.loadUrl('file://somefile.html');
Window.webContents.on('did-finish-load', function() {
    Window.show();
});

对于找到这个答案的人 - 在这里你可以查看关于这个主题的官方电子文档:

在加载页面时,如果窗口尚未显示,则渲染器进程第一次呈现页面时将发出准备好显示的事件.在此事件之后显示窗口将没有可视闪光:

let win = new BrowserWindow({show: false})
win.once('ready-to-show', () => {
  win.show()
})

Answer 2

这种方式有效，但最佳实践是使用ready-to-showAPI 文档中规定的：

在加载页面时，如果窗口尚未显示，则当渲染器进程第一次渲染页面时，将发出 ready-to-show 事件。在此事件之后显示窗口将没有视觉闪烁：

请注意：

此事件通常在 did-finish-load 事件之后发出，但对于具有许多远程资源的页面，它可能在 did-finish-load 事件之前发出。

最后，您应该更新背景颜色以尽可能接近窗口的内容背景。下面是一个例子：

const {BrowserWindow} = require('electron')
let win = new BrowserWindow({show: false, backgroundColor: '#420024'})
win.once('ready-to-show', () => {
  win.show()
})

您还可以添加快速 css 淡入淡出以减少内容对齐。只需将其添加到您的 css 并将 .ui.container 设置为您的根 DOM 元素的任何类。请注意，如果您将其设置为不起作用<body/>

  @keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .ui.container {
    animation: fadein 0.420s;
  }

有关更多信息，请参阅这些链接：https : //electron.atom.io/docs/all/#using-ready-to-show-event https://www.christianengvall.se/electron-white-screen-app-startup /