微信小程序加载图片优化

图片加载体验换速度

我们在加载高清图片时，图片因过大会影响用户的使用体验，常用的方法有懒加载，雪碧图（CSS Sprite），今天我们可以通过另外一种方式完成加载大图操作

小程序会把已加载的静态资源缓存在本地，当短时间内再次发起请求时会直接从缓存中取资源（与浏览器行为一致）。因此，对于大图资源，我们可以先呈现高度压缩的模糊图片，同时利用一个隐藏的节点来加载原图，待原图加载完成后再转移到真实节点上渲染。整个流程，从视觉上会感知到图片从模糊到高清的过程，但与对首屏渲染的提升效果相比，这点体验落差是可以接受的。

代码如下

<!-- banner.wxml -->
<image src="{{url}}" /><!-- 图片加载器 -->
<imagestyle="width:0;height:0;display:none"src="{{preloadUrl}}"bindload="onImgLoad"binderror="onErrorLoad"
/>

// banner.js
Component({ready() {this.originUrl = 'https://path/to/picture'  // 图片源地址this.setData({url: compress(this.originUrl)             // 加载压缩降质的图片preloadUrl: this.originUrl                // 预加载原图})},methods: {onImgLoad() {this.setData({url: this.originUrl                       // 加载原图})}}
})

总结

通过以上代码可以实现在不影响用户体验的同时加载图片高质量大图

微信小程序加载图片优化相关推荐

微信小程序加载图片时，先拉长，再恢复正常
今天在写小程序,发现小程序的图片image如过mode设置为widthFix的话, 加载图片会被先拉伸,后恢复正常我的处理方法是,给他一个初始的height值,或者就直接 height:auto ...
微信小程序加载图片时，先拉长，再恢复正常
今天在写小程序,发现小程序的图片image如过mode设置为widthFix的话, 加载图片会被先拉伸,后恢复正常我的处理方法是,给他一个初始的height值,或者就直接 height:auto 大 ...
php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法
微信小程序加载更多和点击查看更多的实现方法发布时间:2020-12-31 11:01:19 来源:亿速云阅读:126 作者:小新这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方 ...
微信小程序加载 FengMap地图
实现微信小程序加载FengMap地图,主要通过小程序<web-view>组件的src属性的外链方式加载,如<web-view src="https://fengmap.co ...
微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
微信小程序加载中动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 效果图: 代码: <view class="line"><image s ...
微信小程序加载百度地图
1:申请百度地图服务的ak,(个人感觉浏览器和小程序类型没区别,甚至浏览器比小程序更好) 2:配置地图服务,微信小程序开发平台,设置开发设置 3:小程序里添加地图服务的js文件bmap-wx.min. ...
有效解决微信小程序加载视频[渲染层网络层错误] Failed to load media
问题1,小程序的视频一般都是放在网络上的,没谁能把视频放本地把,所以在小程序视频插件在加载视频的时候,就会出现如下错误:[渲染层网络层错误] Failed to load media wxml加载视频 ...
微信小程序加载本地图片方法
目录结构如下,只要图片按正确的方式放入小程序的开发工具的项目中,即可在wxml文件中用内联样式或者image标签都可以引用本地的图片. 步骤一:微信开发工具打开项目步骤二:新建个文件夹(放项目的一 ...

微信小程序加载图片优化

图片加载体验换速度

代码如下

总结

微信小程序加载图片优化相关推荐

最新文章

热门文章