网站毕业设计代做,搭建网站大概需要多少钱,网站空间哪个比较好,畜牧网站建设文章目录 1、问题描述2、详情动图3、解决思路4、解决方案5、效果展示 1、问题描述
在 electron 中使用 el-image 时#xff0c;开启了懒加载后#xff0c;发现只有当窗口滚动后#xff0c;图片才会显示#xff0c;即便图片已经处于窗口的可视区域。当拖动窗口使其尺寸变大… 文章目录 1、问题描述2、详情动图3、解决思路4、解决方案5、效果展示 1、问题描述
在 electron 中使用 el-image 时开启了懒加载后发现只有当窗口滚动后图片才会显示即便图片已经处于窗口的可视区域。当拖动窗口使其尺寸变大及点击窗口最大化后发现图片无法显示。
2、详情动图 3、解决思路
由于拖拽及窗口最大化时窗口无滚动只好通过手动方式滚动装载图片的父级容器该父级容器设置了 overflow: scroll; 或 overflow-y: auto 属性在组件挂载前滚动界面并监听 resize 事件组件卸载后取消监听即可修复该问题。
4、解决方案
div idimgs refscrollContainerel-image :srcinfo.small lazy fitcontain :preview-src-listimgPathList :initial-indexindex :hide-on-click-modaltruetemplate #error idimg_errordiv classimage-slotLoading 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个像素点依然保留了懒加载的功能并非把所有的图片都提前加载完。
