ElectronJS BrowserWindow FOUC

Question

当我创建一个新的BrowserWindow并使用loadURL在渲染器中使用html文件时，我猜想在加载CSS之前，会有半秒钟的未样式化内容闪烁。

window.loadURL('file://' + resolve(__dirname, '..', 'static', 'hello-world', 'index.html')

在index.js中

import './index.css'

Answer 1

您需要将窗口创建为隐藏状态，一旦加载了内容（did-finish-load事件），您将显示该窗口。这样可以防止闪烁。

主要流程代码

const win = new BrowserWindow({
  width: 800,
  height: 600,
  show: false, // loads the window without showing it
  webPreferences: {
    preload: path.join(__dirname, 'preload.js')
  }
})

win.loadFile('index.html')


win.webContents.on('did-finish-load', function () {
  win.show()  // show the window now since everything is ready
})