项目线上运行发现只要使用object-fit:cover属性且图片质量大的时候,界面卡顿严重,滚动条滚动卡顿非常影响用户体验。经过各方排查最终发现一个解决方案是在元素上
新增样式属性可以有效解决。
原因:使用img样式属性object-fit:cover,或者使用ele-ui el-image标签属性fit:‘cover’
<el-image class="cover" @click="additional"
:src="item.imgUrl" :preview-src-list="imgUrlList"
fit="cover">
解决方法:添加新属性
.cover {
transform: translate3d(0, 0, 0)
}