ElectronのWindowをコンテンツの準備が出来てから表示する

通常ElectronでWindowを表示した場合、

win.loadURL(`file://${__dirname}/index.html`);

で自動的に読み込みが開始され、定義されたWindowプロパティを元にウィンドウが表示される。自分の場合SSDを使用しているのであまり違和感はないものの、まだHDDを補助記憶装置としているPCは少なくない。

HDDを使用しているPCの場合読み込みに多少の時間が掛かり、その間Windowは真っ白の状態なので、起動してから表示準備が完了してから表示したい場合のメモφ(´･ω･｀)

Windowをロードする前に一端非表示にしておく。

  win.hide();
  win.loadURL(`file://${__dirname}/index.html`);

非表示メソッドをロード前に実行していればWindowは表示されない。
次にWebContentsオブジェクトのdid-finish-loadイベントを使う。

did-finish-loadイベントはwindow.addEventListener('load', ...)が発火可能になった場合に呼び出される為、メインプロセス側ではこのイベントが発生した際にWindowを表示すればよい。

  win.webContents.on('did-finish-load', ()=>{
    win.show();
  });

以上で、真っ白な読み込み途中のWindowを表示しない方法でした。

##全ソース

main.js

const electron = require('electron');
const {app} = electron;
const {BrowserWindow} = electron;
const loadDevtool = require('electron-load-devtool');
let win;

function createWindow(){
  win = new BrowserWindow({
    width: 900,
    height: 500,
    'titleBarStyle': 'hidden',
    'acceptFirstMouse': true
  });


  win.hide();
  win.loadURL(`file://${__dirname}/index.html`);
  loadDevtool(loadDevtool.REDUX_DEVTOOLS);

  win.openDevTools();
  win.webContents.on('did-finish-load', ()=>{
    console.log("View");
    win.show();
  });

  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if(process.platform !== 'darwin'){
    app.quit();
  }
});

app.on('activate', () => {
  if(win === null){
    createWindow();
  }
});