小程序进入页面时图片拉伸变形优化方案
发表于：2021-07-03 23:27:47浏览：2260次
小程序从接口请求过来的图片，大部分图片大小不是固定一个比例的，如果全部渲染显示在页面上，会有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——不缩放，只显示右下
