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

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

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

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

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

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

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

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

微信小程序图片处理方案，解决加载缓慢，影响用户体验相关推荐

微信小程序开发11 数据预取：合理缓存提高用户体验
你好,我是俊鹏,今天我带你学习怎么通过微信提供的数据预取能力,提高小程序的用户体验. 数据预取也叫数据预加载,顾名思义,这项能力能提前加载未来要使用的数据,然后缓存到本地.这样一来,你在使用这些数据时 ...
微信小程序如何实现上拉加载更多数据?
思路:在下拉到页面的时候我们可以进行数据请求,请求到在上次加载完毕的后五条数据 (举个例子),通过page(页码),count(加载数据得条数)与start进行联接,我们可以发现:start:(pag ...
微信小程序入门五上滑加载下拉刷新
之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介绍加载和刷新. 效果图: 先介绍在IDE中,怎么模拟上滑这个操作.开始我是用鼠标点击文章列表,然后先上移动.结果一直没有结果,以为是 ...
微信小程序实现上拉分页加载数据
文章目录 1. 实现上拉请求 2. 实现分页加载 3. 数据全部加载完成后阻止上拉刷新 4. 容易发送上拉刷新失败问题微信小程序的上拉和下拉刷新是比较常见的功能,下拉刷新比较容易实现,这里说一下上拉 ...
微信小程序苹果IOS手机无法加载显示临时图片路径
问题: 苹果手机无法显示图片,是一片空白. 解决办法: 1,上传到服务器: 把图片上传到服务器,加载服务器路径.但是有没有更好的办法呢,不然太浪费服务器资源了,只是用来临时显示而已,还得定时清理! 2 ...
微信小程序（八）实战——加载图片images
1.加载本地图片本地路径:/pages/images/1.png <image class="widget_arrow" src="/pages/images/1 ...
微信小程序 - 空数据、网络加载失败组件
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果.封装通用组件和工具类小程序码效果图: ##使用说明 1. usingComponents 添加"EmptyV ...
【微信小程序】实现上拉加载更多
小程序上拉加载更多首先我们得运用到小程序的往下拉触底事件,如下图所示代码量很少,方便理解,主要还是要有逻辑,也不说废话了直接上代码吧 data: {paging:5//显示几条内容}onReach ...
微信小程序实现下拉分页加载更多数据
1.使用scroll-view实现滚动下拉 wxml <scroll-view wx:if="{{plotArr.length > 0}}" scroll-y=&quo ...

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

微信小程序图片处理方案，解决加载缓慢，影响用户体验相关推荐

最新文章

热门文章