web-dev-qa-db-fra.com

Affichage de la fenêtre après son chargement complet

Lorsque je crée une application de base et l'initialise à l'aide de la commande electron, elle me montre une fenêtre vierge et un moment plus tard charge le contenu.

Quel événement et quel objet doit être utilisé pour afficher la fenêtre une fois le contenu entièrement chargé?

did-finish-load sur un window.webContent objet? Ou peut-être dom-ready? Ou peut-être autre chose?

app.js:

var app = require('app'),
    Window = require('browser-window'),
    mainWindow = null;

require('crash-reporter').start();

app.on('ready', function() {
   mainWindow = new Window({ width: 600, height: 400, show: false });

   mainWindow.loadUrl('file://' + __dirname + '/index.html');
   mainWindow.show();

   //
   // mainWindow.webContent.on('did-finish-load', function() {
   //     something like that is a proper way?
   // });
   //
});
javascriptnode.jselectron
17
Are Wojciechowski

OK, j'ai moi-même trouvé une réponse. L'événement approprié est did-finish-load et doit être utilisé comme ceci:

var Window = new BrowserWindow({ width: 600, height: 400, show: false });
Window.loadUrl('file://somefile.html');
Window.webContents.on('did-finish-load', function() {
    Window.show();
});

Pour les personnes qui trouvent cette réponse - ici, vous pouvez consulter la documentation officielle sur les électrons sur ce sujet :

Lors du chargement de la page, l'événement prêt à afficher sera émis lorsque le processus de rendu a rendu la page pour la première fois si la fenêtre n'a pas encore été affichée. L'affichage de la fenêtre après cet événement n'aura aucun flash visuel:

let win = new BrowserWindow({show: false})
win.once('ready-to-show', () => {
  win.show()
})
27
Are Wojciechowski

Cette méthode fonctionne, mais la meilleure pratique consiste à utiliser ready-to-show indiqué par la documentation de l'API:

Lors du chargement de la page, l'événement prêt à afficher sera émis lorsque le processus de rendu a rendu la page pour la première fois si la fenêtre n'a pas encore été affichée. L'affichage de la fenêtre après cet événement n'aura pas de flash visuel:

et veuillez noter:

Cet événement est généralement émis après l'événement did-finish-load, mais pour les pages avec de nombreuses ressources distantes, il peut être émis avant l'événement did-finish-load.

Enfin, vous devez mettre à jour la couleur d'arrière-plan pour qu'elle soit aussi proche de l'arrière-plan du contenu de votre fenêtre. Voici un exemple:

const {BrowserWindow} = require('electron')
let win = new BrowserWindow({show: false, backgroundColor: '#420024'})
win.once('ready-to-show', () => {
  win.show()
})

Vous pouvez également ajouter un fondu CSS rapide pour réduire l'accrochage du contenu. Ajoutez simplement ceci aussi votre css et définissez .ui.container à la classe de votre élément DOM racine. Remarque, ne fonctionne pas si vous le définissez sur <body/>

  @keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .ui.container {
    animation: fadein 0.420s;
  }

voir ces liens pour plus d'informations: https://electron.atom.io/docs/all/#using-ready-to-show-eventhttps: //www.christianengvall. se/démarrage de l'électron sur écran blanc /

3
1-14x0r

Vous pouvez essayer de charger le contenu dans un iframe invisible, puis créer une fenêtre et transférer le contenu vers la fenêtre à partir de l'iframe.

0
w3core