防止页面加载电子时出现白色闪烁

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

就我所见(像这里: build立跨平台电子应用程序的4个必须知道的技巧 ),设置窗口的背景色是至less减轻“闪光”的典型方法。 也许你可以看到一个CSS转换,以加载前淡出窗口内容,然后淡入一旦新的内容已经加载?

从那个网站:

2.1指定BrowserWindow背景颜色如果您的应用程序具有非白色背景色,请确保在BrowserWindow选项中指定它。 这不会妨碍应用程序加载时的纯色平方,但至less在中途不会改变颜色:

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

2.2隐藏您的应用程序,直到您的页面已经加载:由于我们实际上在浏览器中,我们可以select隐藏窗口,直到我们知道我们所有的资源已经加载。开始时,确保隐藏您的浏览器窗口:

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

然后,当一切都被加载,显示窗口和焦点,所以popup为用户。 您可以使用build议的BrowserWindow上的“ready-to-show”事件或BrowserWindow的“完成加载”事件来完成此操作。

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