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如果路径不存在、无法读取或不是合法图片返回的是一个空图像不会抛错——也就是说加载了错误路径时启动画面会是空白排查时要先确认图片路径有效。步骤拆解创建窗口new BaseWindow({ width: 800, height: 600 })。BaseWindow是用于组合多个视图的窗口如果窗口只需要一个全屏 web view文档建议直接用更简单的BrowserWindow启动画面场景才需要BaseWindow。创建并设置启动画面new ImageView()创建图片视图nativeImage.createFromPath(path.join(__dirname, loading.png))把本地图片文件读成NativeImageloading.png需要替换为你自己项目里的启动图片路径splashView.setImage(splashImage)设置图片win.setContentView(splashView)把它设为窗口内容视图。win.setContentView(view)的定义见 BaseWindow 文档Sets the content view of the window参数是任意View。创建 WebContentsView 并监听加载完成new WebContentsView()之后通过只读属性view.webContents拿到内部WebContents引用用它来加载 URL用法见 WebContentsView 文档。切换内容视图在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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考