电子加载动画

Question

有人可以帮我为我的 Electron 应用程序实现加载动画吗？我正在学习这项新技术，如果能了解正确的方法就好了。

我正在考虑类似的事情：

app.on('ready', () => {
     // show main content
})

app.on('not-ready', () => {
     // show loading animation
})

Answer 1

据我所知，在 ready 之前 app 没有发出任何事件（唯一的例外是 will-finish-launching 仅在 macOS 上可用）。

另外，在app为ready之前，你不能打开任何BrowserWindow，所以你真的要等一下。

但是，如果您的主应用程序 window 加载速度非常慢，您仍然可以在此之前打开一个 "loading window" 并在主应用程序 window 准备就绪后切换它们。

const { app, BrowserWindow } = require('electron')

app.on('ready', () => {
  let main = null
  let loading = new BrowserWindow({show: false, frame: false})

  loading.once('show', () => {
    main = new BrowserWindow({show: false})
    main.webContents.once('dom-ready', () => {
      console.log('main loaded')
      main.show()
      loading.hide()
      loading.close()
    })
    // long loading html
    main.loadURL('http://spacecrafts3d.org')
  })
  loading.loadURL('loding.html')
  loading.show()
})

^{如果你想消除视觉闪光（但会损失一些速度），你可以在任何地方使用 win.on('ready-to-show') 而不是 win.webContents.on('dom-ready')}

window.open()

如果你想对 window.open() 在渲染进程中打开的 BrowserWindow 做同样的事情，你可以使用 webContents 的 new-window 事件 if nativeWindowOpen是 true

main = new BrowserWindow({
  webPreferences: {
    nativeWindowOpen: true
  }
})
main.webContents.on('new-window', (event, url) => {
  // there are more args not used here
  event.preventDefault()
  const win = new BrowserWindow({show: false})
  win.webContents.once('dom-ready', () => {
    win.show()
    loading.hide() // don't destroy in this case
  })
  win.loadURL(url)
  loading.show()
  event.newGuest = win
})

Answer 2

可以通过显示一个显示 activity 加载程序的新 BrowserWindow 来完成，直到主应用程序完全加载。

让我们定义一个 createWindow 函数（如文档中给出的那样），它负责为用户加载主应用程序：


var loadingwindow = null; // Responsible for creating activity loader

function createWindow () {

  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
  loadingwindow.hide() // Used to hide the loading screen when the contents in main app are loaded

}

现在，为了显示 loadingwindow 屏幕，我们需要将其放置在 app.on('ready' , callback_fn) 中，如下所示：


app.on("ready" , () => {

  loadingwindow = new BrowserWindow({
    frame : false,
    movable : false,
  })

  loadingwindow.loadFile('activity.html') // To load the activity loader html file
  loadingwindow.show();
})

就是这样！ , 要检查它是否正常工作，请将 setTimeout 函数包裹在 app.whenReady().then(createWindow)

上

电子加载动画

Electron loading animation

animation

loader

node.js

electron