ElectronJS BrowserWindow FOUC答案

【问题标题】：ElectronJS BrowserWindow FOUCElectronJS BrowserWindow FOUC
【发布时间】：2020-02-08 17:47:11
【问题描述】：

当我创建一个新的 BrowserWindow 并使用 loadURL 在渲染器中使用一个 html 文件时，我猜想在加载 css 之前，我可以看到一闪而过的无样式内容。

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

在 index.js 中

import './index.css'

【问题讨论】：

如果您将 loadURL 调用替换为 window.loadURL(file://${__dirname}/index.html) 并且是您顶部的 css 导入行，您会看到什么html文件？
我必须使用路径解析，因为构建具有该路径，但没有区别，是的，css 位于顶部。我想知道这是否是创建新 BrowserWindow 的“官方”方式。
@JorgeOrtega 你想显示启动画面吗？

标签： javascript css electron

【解决方案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
})

【讨论】：