防止页面加载电子之间的白色闪烁答案

【问题标题】：Prevent white flash between page loads electron防止页面加载电子之间的白色闪烁
【发布时间】：2017-06-21 12:18:43
【问题描述】：

每次窗口开始加载新的 html 或向服务器发出请求时，窗口都会变白，直到页面完成加载或服务器响应请求。这看起来一点也不好看，而且可能很刺耳。我怎样才能阻止这种情况？

如果您想查看代码
app.js

const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');
let win;
function createWindow () {
    // Create the browser window.
    win = new BrowserWindow({width: 800, height: 600});
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    win.on('closed', () => {
        win = null;
})
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {

    if (process.platform !== 'darwin') {
    app.quit();
}
});

app.on('activate', () => {

    if (win === null) {
    createWindow()
}
});

inedx.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body style="background-color: #222222">
<a href="index.html" style="color: white">Click on me to see a flash</a>
</body>
</html>

【问题讨论】：

标签： javascript html css node.js electron

【解决方案1】：

据我所见（如这里：4 must-know tips for building cross platform Electron apps）设置窗口的背景颜色是至少减轻“闪光”的典型方法。或许您可以使用CSS 过渡来在加载前淡出窗口内容，然后在新内容加载后淡入？

从那个网站：

2.1 指定 BrowserWindow 背景颜色如果您的应用程序具有非白色背景颜色，请确保在您的浏览器窗口选项。这不会阻止纯色正方形虽然您的应用程序加载，但至少它也不会改变中途涂色：

mainWindow = new BrowserWindow({
    title: 'ElectronApp',
    backgroundColor: '#002b36',
  };

2.2 隐藏您的应用程序，直到您的页面加载：因为我们实际上是在浏览器中，我们可以选择隐藏窗口，直到我们知道我们所有的资源都已加载。开始时，请确保隐藏浏览器窗口：

var mainWindow = new BrowserWindow({
      title: 'ElectronApp',
      show: false,
  };

然后，当所有内容都加载完毕后，显示窗口并聚焦它为用户弹出。您可以通过“准备展示”事件来做到这一点在您推荐的BrowserWindow 上，或者您的 webContents 上的“did-finish-load”事件。

mainWindow.on('ready-to-show', function() {
      mainWindow.show();
      mainWindow.focus();
  });

【讨论】：

不幸的是，这并没有解决问题，背景颜色仅在应用程序启动时影响应用程序，其他更改没有明显影响。我不明白为什么电子会这样做，因为没有其他网络浏览器以这种方式运行。
我可能只需要使用单页应用程序
我面临同样的问题
@Ashlin – 看起来需要进行一些实验！我首先会检查是否已在 Electron github 站点上为此提交了一个问题，以及关于它的讨论（如果有的话）。然后可能会变得聪明 - 可能有两个窗口像卡片一样堆叠：加载隐藏的窗口并仅在“准备好”时显示它等等。