web-dev-qa-db-ja.com

完全に読み込まれた後のウィンドウの表示

基本的なアプリケーションを作成し、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?
   // });
   //
});
javascriptnode.jselectron
17
Are Wojciechowski

ええ、私は自分で答えを見つけました。適切なイベントは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()
})
27
Are Wojciechowski

この方法は機能しますが、ベストプラクティスは、APIドキュメントに記載されているready-to-showを使用することです。

ページの読み込み中、ウィンドウがまだ表示されていない場合、レンダラープロセスが初めてページをレンダリングしたときに、すぐに表示できるイベントが発生します。このイベントの後にウィンドウを表示しても、視覚的なフラッシュはありません。

そして注意してください：

このイベントは通常、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フェードを追加して、コンテンツのスナップを少なくすることもできます。これを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-eventhttps：//www.christianengvall。 se/electron-white-screen-app-startup /

3
1-14x0r

非表示のiframeにコンテンツを読み込んでから、ウィンドウを作成し、コンテンツをiframeからウィンドウに転送することができます。

0
w3core