Отображение окна после полной загрузки

Когда я создаю базовое приложение и инициализирую его с помощью команды electron, он показывает мне пустое окно и через некоторое время загружает содержимое.

Какое событие и какой объект следует использовать для отображения окна после полной загрузки содержимого?

did-finish-load на объект window.webContent? Или, может быть, dom-ready? Или может быть что-то еще?

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

Ответы

Ответ 1

Хорошо, я нашел ответ сам. Правильное событие did-finish-load и должно использоваться следующим образом:

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

Для людей, которые находят этот ответ - здесь вы можете проверить официальную электронную документацию в этом разделе:

При загрузке страницы событие, готовое к показу, будет выдаваться, если процесс визуализации отобразил страницу в первый раз, если окно еще не было показано. Отображение окна после этого события не будет иметь визуальной вспышки:

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

Ответ 2

Этот способ работает, однако лучше всего использовать ready-to-show, указанный в документации API:

При загрузке страницы событие, готовое к показу, будет выдаваться, если процесс визуализации отобразил страницу в первый раз, если окно еще не было показано. Отображение окна после этого события не будет иметь визуальной вспышки:

и обратите внимание:

Это событие обычно выдается после события did-finish-load, но для страниц со многими удаленными ресурсами оно может быть выведено перед событием did-finish-load.

Наконец, вы должны обновить цвет фона, чтобы он соответствовал фону содержимого вашего окна. Вот пример:

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

Вы также можете добавить быстрое css fade, чтобы сделать снимок контента меньше. Просто добавьте это тоже свой css и установите .ui.container в любой класс, который является вашим корневым элементом DOM. Заметьте, не работает, если вы установите его на <body/>

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

см. эти ссылки для получения дополнительной информации: https://electron.atom.io/docs/all/#using-ready-to-show-event https://www.christianengvall.se/electron-white-screen-app-startup/

Ответ 3

Вы можете попытаться загрузить содержимое в невидимом iframe, а затем создать окно и передать содержимое в окно из iframe.