javascript - 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
})