Javascript 完全加载后显示窗口

当我创建基本应用程序并使用

electron

命令初始化它时，它会显示一个空白窗口，稍后加载内容

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

是否在
窗口上完成加载
。webContent

对象？或者可能是

dom就绪

？或者别的什么

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?
   // });
   //
});

---

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

好的，我自己找到了答案。正确的事件是

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事件。在此事件后显示窗口将不会有视觉闪烁：

---

这种方法是可行的，但最佳实践是使用API文档中规定的

随时显示
：

加载页面时，如果窗口尚未显示，则当呈现程序进程首次呈现页面时，将发出ready to show事件。在此事件后显示窗口将不会有视觉闪烁：

请注意：

此事件通常在“完成加载”事件之后发出，但对于具有许多远程资源的页面，它可能在“完成加载”事件之前发出

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

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

您还可以添加快速css淡入，以减少内容捕捉。只需将它添加到css中，并将.ui.container设置到根DOM元素所在的任何类中。注意，如果将其设置为

有关更多信息，请参见以下链接：
如果您的位于页面底部，则在加载页面时会触发，因此您的主窗口对象应该是正常的；require中的工厂函数是脚本调用后的回调函数。我不包括
require.js
标记，因为我使用了full
node.js
支持。我不知道electron，但我使用socket.io；您可以发出自己的主题，然后服务器将使用on（）事件来模拟回调。emit（'ready'，'topicstring'）；on（'topic-string'，function（）{//do stuff}）；这样，只有在客户端/DOM完成其“thang.typo found”后，才会调用节点，该节点应该是Window.webContents而不是Window.webcontext。我试图编辑文章，但更改必须至少6个字符长。几个月前，我已经在编辑我的答案时包含了这一点，但是设置背景颜色的技巧肯定会有用！昨晚我还发现了一个新技巧，可以在内容的根元素上设置一个非常快速的css淡入。这一次与Mac电脑在窗户上的褪色效果很好。在窗户里也很好看。
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({show: false, backgroundColor: '#420024'})
win.once('ready-to-show', () => {
  win.show()
})

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