服务器测评网
我们一直在努力

小程序进入页面时图片拉伸变形优化方案

小程序从接口请求过来的图片,大部分图片大小不是固定一个比例的,如果全部渲染显示在页面上,会有1到2秒的拉伸,从大到小快速闪下变形的问题,影响用户体验。

解决方法:

使用image的mode图片剪裁缩放模式,用mode=’widthFix'(宽度不变,高度自动变化,保持原图宽高比不变),然后在图片的css里加上height:auto;min-height:30rpx;加个min-height可以撑开一点距离,可以消除渲染拉伸变形一闪而过的bug。

具体示例代码如下:

<image src='...' style='width:100%;height:auto;min-height:30rpx;' mode='widthFix'></image>

补充知识

image的mode有13种模式,4种是缩放模式,9种是剪裁模式。

1、缩放模式:

scaleToFill——不保持纵横比缩放图片,使图片宽高完全拉伸至image元素

widthFix——保持宽度固定,高度自动变化,意思保持原图宽高比

aspectFit——保持纵横比缩放图片,使得长边露出,意思是能完全展示图片

aspectFill—— 保持纵横比缩放图片,使得短边露出,意思是一个方向是完整的,另一个方向会发生截取

2、剪裁模式:

top——不缩放,只显示顶部

bottom——不缩放,只显示底部

center——不缩放,只显示中间

left——不缩放,只显示左边

right——不缩放,只显示右边

top right——不缩放,只显示右上

top left——不缩放,只显示左上

bottom left——不缩放,只显示左下

bottom right——不缩放,只显示右下

赞(0) 打赏
未经允许不得转载:好主机测评网 » 小程序进入页面时图片拉伸变形优化方案

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫