防止页面加载电子之间的白色闪烁
Posted
技术标签:
【中文标题】防止页面加载电子之间的白色闪烁【英文标题】：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>
【问题讨论】：
【参考方案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 站点上为此提交了一个问题，以及关于它的讨论（如果有的话）。然后可能会变得聪明 - 可能有两个窗口像卡片一样堆叠：加载隐藏的窗口并仅在“准备好”时显示它等等。以上是关于防止页面加载电子之间的白色闪烁的主要内容，如果未能解决你的问题，请参考以下文章