防止Electron页面加载之间的白屏闪烁

Question

防止Electron页面加载之间的白屏闪烁

4

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

- Ashlin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- spring · Accepted Answer

据我所见（例如在此处：构建跨平台 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的"ready-to-show"事件或者webContents的"did-finish-load"事件来实现。

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