Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Electron アプリで起動時に真っ白なウィンドウが一瞬出てしまうのを避ける

More than 3 years have passed since last update.
let win = new BrowserWindow({
  width: 600,
  height: 800,
});
win.loadURL(path_to_html_file);

このようにすると,アプリのサイズが大きい場合に HTML の読み込みが終わるまでウィンドウが真っ白になってしまいます.画面が真っ白になってしまうと見栄えも悪いですし,目にも良くなさそうです.Electron ではこれを抑制する方法があるのですが,ちょっとぐぐった感じあまり知られていなかったようなのでメモしておきます.

これを抑制するために ready-to-show というイベントが BrowserWindow にあります.

これは HTML の描画が終わり,画面が真っ白でなくなったタイミングで起こるイベントで, dom-ready よりも後に発火します.下記のように使います.

let win = new BrowserWindow({
  width: 600,
  height: 800,
  show: false,
});
win.once('ready-to-show', () => { win.show(); });
win.loadURL(path_to_html_file);

注意点として,もちろんアプリ起動までの時間が速くなったりするわけではないです.

起動直後の真っ白いウィンドウが気になってしまった場合はお試しください.

注意

ready-to-show はなるべく BrowserWindow のインスタンスを生成してからすぐにコールバックをセットしてください.当然ですが,コールバックをセットする前に ready-to-show のタイミングが過ぎてしまうと発火しません.

Linda_pp
C++, Ruby.型付けは強いほうが好きで静的派.計算機言語つくったりデスクトップアプリつくったりエディタプラグインつくったりが楽しい.
http://d.hatena.ne.jp/rhysd/
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