完全加载后显示 window

Question

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

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

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

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

Answer 2

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

对于找到此答案的人 - 您可以在此处查看官方电子文档 on this topic:

While loading the page, the ready-to-show event will be emitted when the renderer process has rendered the page for the first time if the window has not been shown yet. Showing the window after this event will have no visual flash:

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

Answer 3

这种方法可行，但最佳做法是使用 API 文档中所述的 ready-to-show：

While loading the page, the ready-to-show event will be emitted when the renderer process has rendered the page for the first time if the window has not been shown yet. Showing the window after this event will have no visual flash:

请注意：

This event is usually emitted after the did-finish-load event, but for pages with many remote resources, it may be emitted before the did-finish-load event.

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

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

您还可以添加快速 css 淡入淡出以减少内容快照。只需将此也添加到您的 css 并将 .ui.container 设置为任何 class 您的根 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/

完全加载后显示 window

Showing window after it is fully loaded

javascript

node.js

electron