javascript - 防止页面加载 Electron 之间的白色闪光

标签 javascript html css node.js electron

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

最佳答案

据我所知(如此处:4 must-know tips for building cross platform Electron apps)设置窗口的背景颜色是至少减轻“闪烁”的典型方法。或许您可以使用 CSS 过渡在加载前淡出窗口内容,然后在加载新内容后淡入?

来自该站点:

2.1 Specify a BrowserWindow background color If your application has a non-white background color, make sure to specify it in your BrowserWindow options. This won't prevent the square-of-solid-color while your application loads, but at least it doesn't also change color halfway through:

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

2.2 Hide your application until your page has loaded: Because we're actually in the browser, we can choose to hide the windows until we know all our resources have been loaded in. Upon starting, make sure to hide your browser window:

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

Then, when everything is loaded, show the window and focus it so it pops up for the user. You can do this with the "ready-to-show" event on your BrowserWindow, which is recommended, or the 'did-finish-load' event on your webContents.

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

关于javascript - 防止页面加载 Electron 之间的白色闪光,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42035905/

相关文章:

javascript - JavaScript 中的伪经典继承与代理函数继承

Javascript:带参数的动态函数

html - 带有 NSString 的 UIWebView 中的 Img Css 百分比

javascript - 带有预加载器的 jQuery 图像淡入淡出

javascript - react : Avoid re-rendering of Component on state change

javascript - Marionette Js 扩展底座 Controller

html - 在页面中间将图像组合在一起

javascript - 动态添加html内容到页面

javascript - 编辑列表中的相应元素

html和css表单标签定位