Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

通常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();
  }
});

aqua2117822
主にWeb開発に関わる事をしています。 HTML/CSS/JavaScript(Node)/PHP 最近はC++を勉強しており、感心のある方はよろしくお願いします。
https://code-note-jp.blogspot.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした