防止页面加载电子之间出现白闪

Question

每次窗口开始加载新的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>

Answer 1

据我所知（如此处：构建跨平台Electron应用程序的4个必知技巧），设置窗口的背景色是至少减轻“闪光”的典型方法。 也许您会喜欢上CSS过渡，以便在加载之前淡出窗口内容，然后在新内容加载后逐渐淡入窗口？

从该站点：

2.1指定BrowserWindow背景色如果您的应用程序具有非白色背景色，请确保在BrowserWindow选项中指定它。 这不会阻止您的应用程序加载时的纯色平方，但至少它不会在更改过程中途更改颜色：

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

2.2隐藏您的应用程序，直到页面加载完毕：由于实际上我们在浏览器中，因此我们可以选择隐藏窗口，直到我们知道所有资源都已加载完毕。启动后，请确保隐藏您的浏览器窗口：

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

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

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

防止页面加载电子之间出现白闪

问题描述

1 个解决方案

解决方案1
4 2017-02-04 05:19:05

防止页面加载电子之间出现白闪

问题描述

1 个解决方案

解决方案1 4 2017-02-04 05:19:05

解决方案1
4 2017-02-04 05:19:05