[Small Program] There is a sense of pulling and shaking when the picture is loaded.

phenomenon

When we are writing image tags, we like to write css styles in wxml for convenience, such as the following

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

When the page is loaded, the default height of the picture is loaded first, and then the style in style is loaded. The width and height of the style in style are smaller than the default width and height, so in this short time, we can see The picture is pulling.

 

solve

So this habit of embedding css in html is not good, the effect is the same but the performance is not so good, it is best to limit the width and height of the display in css, and write the width and height of the picture to death , so that there will be no width when loading. High jitter behavior.

wxml：

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

wxss：

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