web-dev-qa-db-fra.com

Animation de chargement d'électrons

Quelqu'un pourrait-il m'aider à implémenter une animation de chargement pour mon application Electron? J'apprends cette nouvelle technologie et ce serait bien de comprendre la bonne façon de le faire.

Je pense à quelque chose comme:

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

app.on('not-ready', () => {
     // show loading animation
})
node.jsanimationelectronloader
11
ddon-90

Pour autant que je sache, aucun événement n'est émis par app avant ready (la seule exception est will-finish-launching disponible uniquement sur macOS).

De plus, vous ne pouvez ouvrir aucun BrowserWindow avant que app soit ready, vous devez donc vraiment l'attendre.

Cependant, si le chargement de la fenêtre principale de votre application est très lent, vous pouvez toujours ouvrir une "fenêtre de chargement" avant cela et les changer lorsque votre fenêtre principale est prête.

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

Vous pouvez utiliser win.on('ready-to-show') au lieu de win.webContents.on('dom-ready') partout si vous souhaitez éliminer le flash visuel (mais en perdant de la vitesse)

window.open()

Si vous souhaitez faire de même pour BrowserWindow ouvert dans le processus de rendu par window.open(), vous pouvez utiliser l'événement new-window De webContents if nativeWindowOpen est 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
})
18
pergy