javascript 完全加载后显示窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30130861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Showing window after it is fully loaded
提问by Are Wojciechowski
When I create basic application and initialize it using electroncommand, it shows me a blank window and a moment later loads the content.
当我创建基本应用程序并使用electron命令对其进行初始化时，它会向我显示一个空白窗口，稍后加载内容。
Which event and which object should be used to show the window after the content is fully loaded?
内容完全加载后，应该使用哪个事件和哪个对象来显示窗口？
did-finish-loadon a window.webContentobject? Or maybe dom-ready? Or maybe something else?
did-finish-load在window.webContent对象上？或者也许dom-ready？或者也许是别的什么？
app.js:
应用程序.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?
// });
//
});
回答by Are Wojciechowski
OK, I found an answer myself. The proper event is did-finish-loadand should be used like this:
好的，我自己找到了答案。正确的事件是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();
});
For people finding this answer - here you can check official electron documentation 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:
在加载页面时，如果窗口尚未显示，则当渲染器进程第一次渲染页面时，将发出 ready-to-show 事件。在此事件之后显示窗口将没有视觉闪烁：
let win = new BrowserWindow({show: false})
win.once('ready-to-show', () => {
win.show()
})
回答by 1-14x0r
This way works, however best practice is to use ready-to-showstated by the API documentation:
这种方式有效，但最佳实践是使用ready-to-showAPI 文档中规定的：
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:
在加载页面时，如果窗口尚未显示，则当渲染器进程第一次渲染页面时，将发出 ready-to-show 事件。在此事件之后显示窗口将没有视觉闪烁：
and please note:
请注意：
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.
此事件通常在 did-finish-load 事件之后发出，但对于具有许多远程资源的页面，它可能在 did-finish-load 事件之前发出。
Lastly you should update the background color to match as close to the content background of your window. Here is an example:
最后，您应该更新背景颜色以尽可能接近窗口的内容背景。下面是一个例子：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({show: false, backgroundColor: '#420024'})
win.once('ready-to-show', () => {
win.show()
})
You can also add quick css fade to make content snap less. Just add this too your css and set .ui.container to whatever class your root DOM element is. Note, doesn't work if you set it to <body/>
您还可以添加快速 css 淡入淡出以减少内容对齐。只需将其添加到您的 css 并将 .ui.container 设置为您的根 DOM 元素的任何类。请注意，如果您将其设置为不起作用<body/>
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.ui.container {
animation: fadein 0.420s;
}
see these links for more information: https://electron.atom.io/docs/all/#using-ready-to-show-eventhttps://www.christianengvall.se/electron-white-screen-app-startup/
有关更多信息，请参阅这些链接：https: //electron.atom.io/docs/all/#using-ready-to-show-event https://www.christianengvall.se/electron-white-screen-app-startup /
回答by w3core
You can try to load the content in invisible iframe and then create window and transfer content to window from iframe.
您可以尝试在不可见的 iframe 中加载内容，然后创建窗口并将内容从 iframe 传输到窗口。
