node.js - Electron 加载动画

Question

有人可以帮我为我的 Electron 应用程序实现加载动画吗？
我正在学习这项新技术，如果能了解正确的方法会很好。

我正在考虑类似的事情:

app.on('ready', () => {
     // show main content
})

app.on('not-ready', () => {
     // show loading animation
})

Answer 1

据我所知，app 没有发出任何事件之前 ready (唯一的异常(exception)是 will-finish-launching 仅在 macOS 上可用)。

此外，您无法打开任何 BrowserWindow之前 app是 ready ，所以你真的应该等待它。

但是，如果您的主应用程序窗口加载速度很慢，您仍然可以在此之前打开一个“加载窗口”，并在主窗口准备好时切换它们。

const { app, BrowserWindow } = require('electron')

app.on('ready', () => {
  let main = null
  let loading = new BrowserWindow({show: false, frame: false})

  loading.once('show', () => {
    main = new BrowserWindow({show: false})
    main.webContents.once('dom-ready', () => {
      console.log('main loaded')
      main.show()
      loading.hide()
      loading.close()
    })
    // long loading html
    main.loadURL('http://spacecrafts3d.org')
  })
  loading.loadURL('loding.html')
  loading.show()
})

您可以使用 win.on('ready-to-show')而不是 win.webContents.on('dom-ready')如果你想消除视觉闪光，到处都是(但会失去一些速度)
window.open()
如果你想对 BrowserWindow 做同样的事情由 window.open() 在渲染器进程中打开，您可以使用 new-window webContents事件如果 nativeWindowOpen是 true

main = new BrowserWindow({
  webPreferences: {
    nativeWindowOpen: true
  }
})
main.webContents.on('new-window', (event, url) => {
  // there are more args not used here
  event.preventDefault()
  const win = new BrowserWindow({show: false})
  win.webContents.once('dom-ready', () => {
    win.show()
    loading.hide() // don't destroy in this case
  })
  win.loadURL(url)
  loading.show()
  event.newGuest = win
})