Node.js Girl
  1. Node.js Girl
  3. Animation de chargement d’électrons
Intereting Posts
res.render () Locals Locals sur Frontend Comment peut-on correctement arrêter socket.io / websocket-client? Comment puis-je m’assurer que cette boucle fonctionne comme prévu dans le fichier node.js itérer sur un tableau d’objects en jade / pugjs Comment configurer artefact pour une utilisation avec des artefacts node.js? Détruire le cookie NodeJs Générateur de séquence pseudo-aléatoire JavaScript Transférer un proxy http à l’aide d’un proxy http noeud Nettoyage de la firebase database de test avant d’exécuter des tests modifier les résultats dans post find mongoose hook Recherche dans un fichier MP3 en streaming avec la balise HTML5 Sequelize find basé sur l’association plus d’un index 2d, ne sachant pas sur lequel exécuter geoNear Le nœud ne peut pas gratter certaines pages Lancer le script après la fin du service

Animation de chargement d’électrons

Est-ce que quelqu’un pourrait m’aider à mettre en place une animation de chargement pour mon application Electron? J’apprends cette nouvelle technologie et il serait bon 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 })

Pour autant que je sache, aucun événement n’est émis à partir de l’ app avant que le app ne soit ready (la seule exception est que le will-finish-launching disponible uniquement sur macOS).

En outre, vous ne pouvez pas ouvrir BrowserWindow avant que l’ app soit ready . Vous devez donc vraiment attendre.

Toutefois, si le chargement de la fenêtre de votre application principale 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 voulez éliminer le flash visuel (mais en perdant un peu de vitesse)

window.open()

Si vous voulez faire la même chose pour BrowserWindow ouvert dans le processus de rendu par window.open() , vous pouvez utiliser l’événement new-window de webContents si nativeWindowOpen a la valeur 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 })