Zeige Fenster, nachdem es voll geladen ist

Question

Wenn ich grundlegende Anwendung erstellen und initialisieren mit electron Befehl, zeigt es mir ein leeres Fenster und einen Moment später lädt den Inhalt.

Welches Ereignis und welches Objekt sollte verwendet werden, um das Fenster anzuzeigen, nachdem der Inhalt vollständig geladen wurde?

did-finish-load auf einem window.webContent Objekt? Oder vielleicht dom-ready? Oder vielleicht noch etwas?

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? 
    // }); 
    // 
}); 

Answer 1

OK, ich habe selbst eine Antwort gefunden. Die richtige Veranstaltung ist did-finish-load und sollte wie folgt verwendet werden:

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

---

Für Menschen, diese Antwort zu finden - hier können Sie offizielle Elektronen Dokumentation überprüfen on this topic:

Während Laden der Seite, die bereit -to-show-Ereignis wird ausgegeben, wenn der Rendererprozess die Seite zum ersten Mal gerendert hat, wenn das Fenster noch nicht angezeigt wurde. Zeigen Sie das Fenster nach diesem Ereignisse wird keinen visuellen Blitz hat:

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

Answer 2

Sie können versuchen, den Inhalt in unsichtbares iframe zu laden und dann Fenster und die Übertragung von Inhalten auf Fenster aus iframe erstellen.

Answer 3

Auf diese Weise funktioniert, aber am beste Praxis ist ready-to-show von der API-Dokumentation angegeben zu verwenden:

Während Laden der Seite, die Ein showbereites Ereignis wird ausgegeben, wenn der Rendererprozess die Seite zum ersten Mal gerendert hat, wenn das Fenster noch nicht angezeigt wurde. Zeigen Sie das Fenster nach diesem Ereignisse wird keinen visuellen Blitz hat:

und bitte beachten Sie:

Dieses Ereignis in der Regel nach dem tat-Finish-Ladeereignis ausgestrahlt wird, sondern auch für Seiten mit vielen Remote-Ressourcen, Es kann vor dem Did-Finish-Load-Ereignis ausgegeben werden.

Zuletzt sollten Sie die Hintergrundfarbe so anpassen, dass sie dem Inhaltshintergrund Ihres Fensters entspricht. Hier ein Beispiel:

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

Sie können auch eine schnelle CSS-Überblendung hinzufügen, um den Inhalt schneller zu machen. Fügen Sie dazu einfach Ihre CSS hinzu und setzen Sie .ui.container auf welche Klasse auch immer Ihr Wurzel-DOM-Element ist. Beachten Sie, funktioniert nicht, wenn Sie es <body/>

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

sehen diese Links für weitere Informationen setzen: https://electron.atom.io/docs/all/#using-ready-to-show-event https://www.christianengvall.se/electron-white-screen-app-startup/