现象

当我们在写入图片标签时，为了方便喜欢在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;
}

【小程序】图片加载时出现拉扯感，抖动感。相关推荐

如何利用 webp 进行小程序图片加载速度的优化
导语最近很长一段时间没有更新博客,一方面是自己最近参与了小程序的开发,另一方面也是自己略有些怠惰,给自己记个过~那么现在既然回到学校那么还是要分享一些知识的. 前一阵子参与微信小程序开发时遇到了一个 ...
【愚公系列】2022年09月微信小程序-图片加载和全屏适配问题
文章目录前言一.图片加载二.适配机型实现全屏背景图前言在使用图片问题中可能会遇到各种各样的问题,比如图片加载不出来,图片显示在不同机型效果不同,图片加载展示问题等等. 微信小程序image相 ...
小程序图片加载失败binderror方法处理
场景:我们在小程序项目中的一个图片列表,当某些图片加载失败后,直接显示空白,这样用户体验不好,为了解决当图片加载失败,我们给一个默认图片代替,参考官方给的图片加载失败的处理方法:binderror c ...
微信小程序 - 图像加载时渐隐淡入效果（image）
前言由于微信小程序图片组件加载成功后,会突然显示出来比较生硬,所以需要对其进行动画修饰. 我们可以利用简单的动画对其进行修饰,当图片加载完毕后应用自己设置一个渐隐的过渡效果时间,如下图所示: 解决 ...
小程序图片加载不出来
微信小程序的的图片显示不出来解决方案 1.标签是不是 2.路径有问题 -/父目录 ./同级目录 /根目录 3.需要设置宽和高,不然也显示不出来 4. (1).<view></vie ...
小程序不能加载服务器上缩略图,微信小程序图片加载失败处理方法
将页面打印成excel 在servlet中调用 try { File fileWrite = new File("D:/Write.xls"); fileWrite.createN ...
小程序图片加载不出来（显示）
在wxml页面中使用<image>标签展示图片,图片路径使用的是本地图片. 现象: 图片在开发者工具上可以显示出来.但是在手机上显示不出来, 解决: 最后发现是因为我把图片名字的前缀中包含 ...
WeChat报错微信小程序图片加载失败渲染层网络层错误Failed to load image /pages/index/image/index.jpg：用绝对路径不用相对路径
初级前端小程序项目加载速度优化
这份文字是根据近期团队做来问丁香医生 SPA 和丁香医生小程序加载速度优化的经历整理而成. 效果古人有一句话叫做:治感冒看疗效.既然是关于速度优化的,我们就先来看一下优化的效果. 来问丁香医生 ...

【小程序】图片加载时出现拉扯感，抖动感。

现象

解决

【小程序】图片加载时出现拉扯感，抖动感。相关推荐

最新文章

热门文章