Electron 如何用 ImageView 显示启动画面并在内容加载完成后切换为 WebContentsView？

Electron 如何用 ImageView 显示启动画面并在内容加载完成后切换为 WebContentsView？

【免费下载链接】electron:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS项目地址: https://gitcode.com/GitHub_Trending/el/electron

使用 Electron 的BaseWindow组合多个视图时，页面 URL 加载期间窗口内会有一段空白时间。官方文档推荐的方案是：先用ImageView显示一张启动画面（splash screen）作为窗口内容视图，等WebContentsView内的页面加载完成后再把内容视图切换过去。

const { BaseWindow, ImageView, nativeImage, WebContentsView } = require('electron') const path = require('node:path') const win = new BaseWindow({ width: 800, height: 600 }) // Create a "splash screen" image to display while the WebContentsView loads const splashView = new ImageView() const splashImage = nativeImage.createFromPath(path.join(__dirname, 'loading.png')) splashView.setImage(splashImage) win.setContentView(splashView) const webContentsView = new WebContentsView() webContentsView.webContents.once('did-finish-load', () => { // Now that the WebContentsView has loaded, swap out the "splash screen" ImageView win.setContentView(webContentsView) }) webContentsView.webContents.loadURL('https://electronjs.org')

上面这段代码即出自 ImageView 文档 开头的示例，ImageView的用途说明原文就是："Useful for showing splash screens that will be swapped forWebContentsViews when the content finishes loading."。下面逐段说明其中的关键 API 与适用条件。

前提条件

以下约束来自文档，写代码前需要确认：

• BaseWindow、ImageView、WebContentsView都运行在主进程（Process: Main），并且都要求app模块的ready事件触发后才能使用。所以这些 API 的调用代码应放在app.whenReady()之后执行。
• ImageView是实验性 API（文档中标注_Experimental_），未来可能变更或移除。
• Electron 内置类不能在用户代码中被子类化，包括ImageView和WebContentsView（参见 FAQ 说明）。
• ImageView.setImage()只接受NativeImage参数，且只能使用NativeImage支持的图片格式。
• nativeImage.createFromPath(path)从图片文件（如 PNG 或 JPEG）创建NativeImage；如果路径不存在、无法读取或不是合法图片，返回的是一个空图像，不会抛错——也就是说加载了错误路径时启动画面会是空白，排查时要先确认图片路径有效。

步骤拆解

1. 创建窗口：new BaseWindow({ width: 800, height: 600 })。BaseWindow是用于组合多个视图的窗口；如果窗口只需要一个全屏 web view，文档建议直接用更简单的BrowserWindow，启动画面场景才需要BaseWindow。
2. 创建并设置启动画面：
   • new ImageView()创建图片视图；
   • nativeImage.createFromPath(path.join(__dirname, 'loading.png'))把本地图片文件读成NativeImage，loading.png需要替换为你自己项目里的启动图片路径；
   • splashView.setImage(splashImage)设置图片；
   • win.setContentView(splashView)把它设为窗口内容视图。win.setContentView(view)的定义见 BaseWindow 文档："Sets the content view of the window"，参数是任意View。
3. 创建 WebContentsView 并监听加载完成：new WebContentsView()之后通过只读属性view.webContents拿到内部WebContents引用，用它来加载 URL（用法见 WebContentsView 文档）。
4. 切换内容视图：在did-finish-load事件回调里再次调用win.setContentView(webContentsView)，把窗口内容从ImageView换成WebContentsView。注意示例中用的是once，即只监听一次加载完成事件。

如何判断切换时机到了

切换的触发点是WebContents的did-finish-load事件。WebContents 文档 对它的定义是：

Emitted when the navigation is done, i.e. the spinner of the tab has stopped spinning, and theonloadevent was dispatched.

即导航完成（浏览器标签页加载指示器停止转动、页面onload已派发）时触发，这就是启动画面应该撤掉的时点。另外webContents.loadURL()在文档中也有对应的成功判定：它返回的 Promise 在导航完成时 resolve（见did-finish-load），加载失败时 reject 并触发did-fail-load。示例代码选择的是事件监听而非 Promise，两种方式都基于"导航完成"这一条件。

运行效果上可以这样核对：loadURL指向一个慢加载的页面时，窗口先显示启动图；等did-finish-load触发后，窗口内容变为加载好的页面。反过来，如果启动画面始终不切换，优先检查图片路径（图片加载失败只产生空图像而非报错）以及did-finish-load是否真的触发（可对照did-fail-load判断是否加载失败）。

限制与补充

• ImageView的实验性属性意味着这个模式在后续版本中可能调整，接入生产功能前建议留意 API 变更记录。
• 资源管理方面，BaseWindow关闭时并不会自动销毁其WebContentsView的webContents，需要在使用者关闭窗口时自行关闭这些webContents，相关说明见 BaseWindow 文档的 Resource management 一节。
• WebContentsView构造时可以传webContents选项，让视图接管一个已存在的WebContents，但同一个WebContents同一时间只能被一个WebContentsView展示；本场景用默认构造即可。

【免费下载链接】electron:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS项目地址: https://gitcode.com/GitHub_Trending/el/electron