处理在 electron 中使用开启了懒加载的 el-image 后,窗口最大化或窗口尺寸变化后图片无法显示的问题

文章目录

      • 1、问题描述
      • 2、详情动图
      • 3、解决思路
      • 4、解决方案
      • 5、效果展示

1、问题描述

electron 中使用 el-image 时,开启了懒加载后,发现只有当窗口滚动后,图片才会显示,即便图片已经处于窗口的可视区域。当拖动窗口使其尺寸变大及点击窗口最大化后发现图片无法显示。

2、详情动图

详情动图

3、解决思路

由于拖拽及窗口最大化时,窗口无滚动,只好通过手动方式滚动装载图片的父级容器,该父级容器设置了 overflow: scroll;overflow-y: auto 属性,在组件挂载前滚动界面并监听 resize 事件,组件卸载后取消监听,即可修复该问题。

4、解决方案

<div id="imgs" ref="scrollContainer"><el-image :src="info.small" lazy fit="contain" :preview-src-list="imgPathList" :initial-index="index" :hide-on-click-modal="true"><template #error id="img_error"><div class="image-slot">Loading image error</div></template></el-image>
</div>
// 绑定图片展示主容器
const scrollContainer = ref(null);const handleResize = () => {nextTick(() => {if (scrollContainer.value) {// 只需滚动 1px 即可解决,无需过多,但也不可太少scrollContainer.value.scrollTop += 1;}});
};onMounted(() => {handleResize();window.addEventListener("resize", handleResize);
});onUnmounted(() => {window.removeEventListener("resize", handleResize);
});

5、效果展示

通过观察dom元素结构还发现,即便手动滚动了1个像素点,依然保留了懒加载的功能,并非把所有的图片都提前加载完。

效果展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/872110.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于JAVA+SpringBoot+Vue+uniapp+协同过滤算法+爬虫+AI的减肥小程序

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 小程序用户登录&#…

前端开发体系+html文件详解

目录 html骨架 body主体内基本元素 基本元素 超文本&#xff08;超链接跳转&#xff09; 锚点 图片标签 列表标签 表格标签 框架标签&#xff08;窗口标签&#xff09; 音频标签 视频标签 VScode编译器 输入框 字体样式 实例展示&#xff1a; 首先简要介绍前端的整…

在VS2017下FFmpeg+SDL编写最简单的视频播放器

1.下载ShiftMediaProject/FFmpeg 2.下载SDL2 3.新建VC控制台应用 3.配置include和lib 4.把FFmpeg和SDL的dll 复制到工程Debug目录下&#xff0c;并设置调试命令 5.复制一下mp4视频到工程Debug目录下&#xff08;复制一份到*.vcxproj同一目录&#xff0c;用于调试&#xff09; 6…

python中的re模块--正则表达式

正则表达式&#xff0c;又称规则表达式。&#xff08;英语&#xff1a;Regular Expression&#xff0c;在代码中常简写为regex、regexp或RE&#xff09;&#xff0c;计算机科 学的一个概念。正则表达式通常被用来检索、替换那些符合某个模 式(规则)的文本 re模块作用 通过使用…

JVM 内存介绍

本文主要介绍&#xff1a; JVM 内存分哪几个区&#xff0c;每个区的作用是什么 备注: 橙色:堆 和 方法区 &#xff0c;属于jvm公有部分,可以进行调优 灰色:java栈,本地方法栈和计数器 属于jvm的私有部分,不可进行调优 一个对象从创建到被回收的过程是怎样的? Personpnew Perso…

【HarmonyOS】HarmonyOS NEXT学习日记:一、创建和运行一个页面

【HarmonyOS】HarmonyOS NEXT学习日记&#xff1a;一 DevEco Studio下载与安装 直接到官网的下载地址下载即可 正常下载、解压、安装完成后 正常来说不会有项目&#xff0c;并且是英文界面。 需要汉化的话可以按照下面的步骤设置插件 选择customize里的 all setting 进入…

macOS Sequoia 15(Macos15系统)v15.0 Beta 3发布 macOS Sequoia 15 功能预览

macOS Sequoia 15 功能预览 犀利一如 Mac macOS Sequoia 15(Macos15系统)v15.0 Beta 3测试版本下载安装 连续互通 你的 Mac 上&#xff0c;iPhone 用起来。 有了 iPhone 镜像功能&#xff0c;在 Mac 上就能看到 iPhone 屏幕画面&#xff0c;还能直接进行操控&#xff0c;不拿…

uniapp 实现上传文件的功能

上传单个文件 <script setup>const handleUploadClick () > {console.log("上传文件")uni.chooseImage({success: (chooseImageRes) > {const tempFilePaths chooseImageRes.tempFilePaths;console.log("用户选择的图片&#xff1a;", temp…

誉天教育与武汉晴川学院携手开展鸿蒙实训营,共筑鸿蒙生态新篇章!

在数字经济蓬勃发展的今天&#xff0c;鸿蒙系统作为华为自主研发的操作系统&#xff0c;正逐步构建起一个开放、协同、共赢的生态体系。为了进一步推动鸿蒙生态的繁荣发展&#xff0c;培养更多具备鸿蒙原生应用开发能力的专业人才&#xff0c;誉天教育与武汉晴川学院强强联合&a…

十九、【文本编辑器(五)】排版功能

目录 一、搭建框架 二、实现段落对齐 三、实现文本排序 一、搭建框架 (1) 在imgprocessor.h文件中添加private变量&#xff1a; QLabel *listLabel; //排序设置项QComboBox *listComboBox;QActionGroup *actGrp;QAction *leftAction;QAction *…

C#知识|SqlParameterCollection 只接受非空的 SqlParameter 类型对象,不接受 SqlParameter[] 对象

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 今天在练习C#时遇到报错&#xff1a; SqlParameterCollection 只接受非空的 SqlParameter 类型对象&#xff0c;不接受 SqlParameter[] 对象。 01 为什么使用SqlParameter 开发中之所以采用SqlParameter[]param是因为…

weblogic中间件运维常见问题

背景&#xff1a; 工作需要经常使用到weblogic中间件产品&#xff0c;在维护过程中有遇见的一些常见故障问题&#xff0c;这里分享给大家。 问题一&#xff1a;密码文件报错 问题描述&#xff1a; weblogic应用在启动过程中出现如下的报错内容&#xff1a; # tail -f nohup.ou…

五、 计算机网络(考点篇)试题

A、B、C都没问题&#xff0c;选D。现在基本上所有的互联网网站都是https了&#xff0c;电子支付类的更不用说了。 简单邮件传输的协议是SMTP(发)和POP3(收)&#xff0c;分别是25和110。选B和B 网络分片技术&#xff0c;分割切片嘛。 选C&#xff0c;AES加密等级比较高了&#x…

MFC程序创建word,创建表格,写入数据

文章目录 1、MFC程序功能&#xff1a;2、MFC程序实现2.1 创建项目2.2 添加word操作类2.3 添加word资源2.4 编写代码&#xff0c;实现将数据写入到word2.5 运行程序、验证功能3、工程代码下载 1、MFC程序功能&#xff1a; 创建word文档&#xff1b;向文档中写入字符串&#xff…

Jenkins用户权限管理指定操作任务

安装插件 在 Jenkins 的管理插件中进行插件安装。 搜索插件库&#xff1a;Role-based Authorization Strategy 修改授权策略 在全局安全配置中&#xff0c;把授权策略改为Role-Based Strategy 添加角色规则 在安全中选择Manage and Assign Roles 在Global roles中添加一个…

Docker的虚拟化安装、常用命令和使用案例

文章目录 一、Docker的虚拟机安装1、完成虚拟机的更新2、完成Docker安装3、配置镜像加速器 二、Docker常用命令三、Docker的容器创建四、理解虚拟机中的Docker容器 一、Docker的虚拟机安装 1、完成虚拟机的更新 详见我的文章。 2、完成Docker安装 yum list installed|grep …

数据的力量:Facebook如何通过数据分析驱动创新

在当今数字化和信息化的时代&#xff0c;数据被认为是推动企业创新和发展的关键因素之一。作为全球最大的社交媒体平台&#xff0c;Facebook不仅积累了庞大的用户数据&#xff0c;还利用先进的数据分析技术&#xff0c;不断探索和实现新的创新。本文将深入探讨Facebook如何通过…

知识付费小程序源码 thinkphp后台 带3000多条教程数据

知识付费小程序源码 thinkphp后台 带3000多条教程数据,云码素材有进行了更新开发,更新了广告位管理,后台一键更新数据,用户登录 不单单是一个源码,我们对接了云码素材的教程资源,也就是说你可以免费拥有云码素材所有教程资源,后台一键更新,无须自己再更新资源,每天有我们更新,…

​iredmail邮件系统如何有效配置SMTP服务器?​

iredmail邮件系统安全性如何保障&#xff1f;怎么选择邮件系统&#xff1f; SMTP是发送邮件的标准协议&#xff0c;设置正确的SMTP服务器可以保证邮件能够顺利发送到接收者的收件箱中。AokSend将详细介绍在iredmail邮件系统中如何配置SMTP服务器&#xff0c;以确保您的邮件系统…

EPLAN 去掉PDF中的红色跳转标识

EPLAN PDF图纸导出后体验跳转标识会有红色标识&#xff0c;如何去掉呢&#xff1f;下面介绍一下方法&#xff1a; 此为现象&#xff1a; EPLAN 2.9的帮助文档里提示&#xff1a; 在导出的 PDF 文档中&#xff0c;跳转后的跳转目标现在通过红色的闪烁框进行标识。可能的跳转目…