微信小程序图片处理方案,解决加载缓慢,影响用户体验

您所在的位置:网站首页 微信小程序图片压缩的方法 微信小程序图片处理方案,解决加载缓慢,影响用户体验

微信小程序图片处理方案,解决加载缓慢,影响用户体验

2024-01-08 02:03| 来源: 网络整理| 查看: 265

1.改变图片尺寸:对于上传的图片,在后台对图片进行可接受范围内的最大限度压缩,图片宽高不用太大,大概预留你图片容器的1.5倍就行了,除非你做图片放大镜功能,否则小程序上加载2倍图意义不大,清晰度体验也没那么差。我做的项目没有图片上传功能,我就用的美图秀秀统一改变图片尺寸

2.采用分布式,将图片上传到云端,图片地址存储到数据库,去云端获取图片访问链接,如cos,oss,阿牛云、又拍云,

利用软件统一改照片名字,然后直接上传原图到云存储,利用云存储的图片处理功能将图片的格式和尺寸修改,就不用自己来修改了

问题:数据库如何存储云端图片的地址,如何命名

3.将图片进行质量处理,压缩图片大小,转换为webp格式,这招非常的有用,速度一下子就提起来了,又拍云有这个功能,很好用,转换后不会改变图片尺寸,只改变图片大小,图片从124k到16k;但webp格式不支持苹果手机显示,但也有解决办法

4.使用微信的image上自带lazy-load(懒加载),当屏幕移动到图片位置的时候,再把图片的地址换成它的地址,显示图片;适用于淘宝类型的多图展示

5.使用以上方法,速度是提升上来了,但页面有时会出现,各照片不同时出现。影响用户软件的使用体验,解决办法:把图片列表装在一个容器里,把容器的透明度设置为0,当我们请求接口并判断图片加载完成之后,我们再让容器渐显。这时候效果就是四张图片全部刷的出来了

å¨è¿éæå¥å¾çæè¿°

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3