博客

现象

当我们在写入图片标签时，为了方便喜欢在wxml里面写入css样式，比如以下

<view>
  <image src='/images/BILIBILI_LOGO.png' mode="widthFix"  style="width:140rpx; height:60rpx;"></image>
</view>

在页面加载的时候，首先加载的是图片的默认高度，而后才加载style里面的样式，style里面的样式宽度和高度都比默认宽高要小，因此在这短暂的时间里，我们就能够看到图片在拉扯。

解决

所以这种css嵌入html中的习惯是不好的，效果一样但是性能没这么好，最好就是在css中限制显示的宽高，

将图片的宽高写死

，从而在加载时不会有宽高的抖动行为。

wxml：

<view class='image-icon'>
  <image src='/images/BILIBILI_LOGO.png' mode="widthFix"></image>
</view>

wxss：

.image-icon image{
  width:140rpx; 
  height:60rpx;
}