27

当我创建基本应用程序并使用electron命令对其进行初始化时，它会显示一个空白窗口，稍后会加载内容。

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

did-finish-load在一个window.webContent物体上？或者也许dom-ready？或者也许是别的什么？

应用程序.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?
   // });
   //
});
4

3 回答 3

42

好的，我自己找到了答案。正确的事件是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();
});

对于找到此答案的人-在这里您可以查看有关此主题的官方电子文档：

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

let win = new BrowserWindow({show: false})
win.once('ready-to-show', () => {
  win.show()
})
于 2015-05-08T20:51:47.270 回答
9

这种方式有效，但最佳做法是使用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 /

于 2017-09-29T03:17:26.053 回答
0

您可以尝试在不可见的 iframe 中加载内容，然后创建窗口并将内容从 iframe 传输到窗口。

于 2015-05-08T20:07:52.637 回答