Electron/Angular项目Onload将图像显示为飞溅

Question

我有一个Angular/Electron应用程序。

应用程序加载的内容我需要将图像显示为启动屏幕，然后在加载完成时消失。

在我的index.html中，我有：

<app-root>Loading ...</app-root>

但我从来没有看到。。。我需要一个加载。。。是，让它停留几秒钟，然后消失。

例如：

<app-root><div id="splash"><img src="assets/splash.png" /></div></app-root>

我一直在谷歌上搜索，但什么都找不到，这就是为什么我没有任何代码可以显示。

我该怎么做？

Answer 1

我不知道angular，但我有一个带防溅屏的电子应用程序

你需要为splashscreen创建一个单独的窗口，首先显示它，然后在你的应用程序准备好时关闭它

结构如下：

splash.js

const path = require('path')
const StandardWindow = require('./StandardWindow')
const loadCss = require('./loadCss')
function splash () {
const splashScreen = new StandardWindow({
file: 'splash.html',
width: 450,
height: 200,
frame: false,
resizable: false,
backgroundColor: '#fff'
}) // building the splashscreen window
splashScreen.show() // showing it immediately
splashScreen.onDidFinishLoad = function () {
loadCss(this, path.join(__dirname, 'splash.css'))
} // loading the splash css after html loading
return splashScreen
}
module.exports = splash

loadCss.js

const fs = require('fs')
function loadCss (elWindow, cssPath) {
fs.readFile(
cssPath,
'utf-8',
(error, data) => {
if (error) throw error
const css = data.replace(/s{2,10}/g, ' ').trim()
elWindow.webContents.insertCSS(css)
console.log('loaded css :' + css.substring(0, 20) + '...')
}
)
}
module.exports = loadCss

StandardWindow.js

const { BrowserWindow } = require('electron')
const path = require('path')
const loadCss = require('./loadCss')
// default window settings
const defaultProps = {
width: 500,
height: 800,
show: false,
// update for electron V5+
webPreferences: {
nodeIntegration: true
}
}
class StandardWindow extends BrowserWindow {
constructor ({
file,
devTools,
onDidFinishLoad,
onReadyToShow,
...windowSettings
}) {
console.log('creating StandardWindow ...')
// calls new BrowserWindow with these props
super({ ...defaultProps, ...windowSettings })
this.loadFile(file)
if (devTools) this.webContents.openDevTools()
this.webContents.on('did-finish-load', () => {
loadCss(this, path.join(__dirname, '/shared.css'))
if (onDidFinishLoad) onDidFinishLoad()
if (this.onDidFinishLoad) this.onDidFinishLoad()
})
// gracefully show when ready to prevent flickering
this.once('ready-to-show', () => {
this.show()
if (onReadyToShow) onReadyToShow()
if (this.onReadyToShow) this.onReadyToShow()
})
console.log('...StandardWindow created')
}
}
module.exports = StandardWindow

然后在你的main.js中

const { app } = require('electron')
const splash = require('./splash/splash')
const StandardWindow = require('./StandardWindow')

app.on('ready', function () {
let splashscreen = splash()
//then just create your main window and start your processes
let mainWindow = new StandardWindow({
devTools: true,
file: 'main.html',
width: 800,
height: 600,
webPreferences: {
// preload: path.join(__dirname, 'preload.js')
},
onDidFinishLoad: _ => {
splashScreen.close()
splashScreen = null
// close your splashscreen when window ready !
}
})
})

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

然后你只需要创建"splash.html"one_answers"splash.js"来为你的主窗口编码splashscreen和"main.html"。。。

希望对有所帮助