Electron如何在BrowserWindow中加载页面时显示加载微调器答案

【问题标题】：Electron how to show loading spinner while loading page in BrowserWindowElectron如何在BrowserWindow中加载页面时显示加载微调器
【发布时间】：2017-06-01 13:02:40
【问题描述】：

我正在构建一个电子浏览器应用程序。此应用程序将加载外部 URL（仅限）我的问题是如何在加载页面时添加微调器（gif 图像）。我知道有一个偶数'did-start-loadin'。这工作正常，但我没有找到展示跑步者的方法。 Electron / BrowserWindow 中也没有状态栏选项。把它放在那里会是我的最爱。

有什么想法吗？

【问题讨论】：

标签： spinner electron

【解决方案1】：

也许创建一个在您启动应用程序后立即打开的第二个窗口。基本上只是一个带有微调器的闪屏。您的主窗口在加载时应该是隐藏的，但是一旦did-finish-load 被触发，您就可以关闭启动屏幕并显示主窗口。

【讨论】：

这就是我已经拥有的。但这只是在启动应用程序时。提交页面或加载另一个页面时，我希望最终用户可以看到它。所以一些加载指示器。
也许webview 元素可能适合您。

【解决方案2】：

如果只是寻找 webapp 正在加载一些 url 内容的基本指示，您可能正在寻找这个（在应用程序上显示标题更改 + 进度条，您也可能更改图标等）。在你创建 main 之后做

const mainWindow = new BrowserWindow({ .... });      

mainWindow.webContents.on('did-start-loading', () => {
  mainWindow.setTitle(APP_NAME + ' * Loading ....');
  mainWindow.setProgressBar(2, { mode: 'indeterminate' }) // second parameter optional
});

mainWindow.webContents.on('did-stop-loading', () => {
  mainWindow.setTitle(`${APP_NAME}`);
  mainWindow.setProgressBar(-1);
});

如果有人可以提供一些动画标题的方法，很高兴听到（可能是一些 setInterval/clearInterval 捆绑，还没有弄清楚）

也可以在加载时执行 mainWindow.setOpacity(0.8) - 但对我来说这看起来不太好

【讨论】：