专栏首页腾讯NEXT学位干货 | 如何实现小程序图片模糊预加载?

干货 | 如何实现小程序图片模糊预加载?

导语

最近在做的小程序项目设计大量图片的展示,小程序已经提供了图片的懒加载功能,但是由于图片本身比较大加上要展示的图片比较多,如何以一个比较友好的方式展示未加载完成的过程就是一个必须解决的问题了。

思路

由于小程序没有提供 Image 这个 js 对象,所以在小程序中实现预加载不能直接像原生js 一样,直接使用 new Image()创建一个图片对象,只能在视图层创建图片,通过onLoad事件监听图片加载完成。

实现图片模糊加载的思路就是先加载一个目标图片的缩略图,缩略图的加载一般非常快可以忽略不计,缩略图加载完成之后以高斯模糊的形式展示,与此同时加载原图,原图加载完成后替代原缩略图,原图和缩略图需要设置相同的宽高。思路理清楚之后,开始码代码吧~

由于项目使用了Taro框架,下面的代码写法是React的写法,原生或者其他框架也可以参考,没有太大的出入,思路都是一样的。

imgLoader.js(以下为部分代码)

      // 监听原图加载完成  toggleOriginLoaded() {    this.setState({      loaded: true    });  }  // 监听缩略图加载完成  toggleThumbLoaded() {    this.setState({      thumbLoaded: true    });  }    render() {    let { loaded, thumbLoaded } = this.state;    let { imgU, imgW, imgH } = this.props;    // 根据传入的宽高设置缩略图和原图的宽高    let style = {      width: imgW + 'rpx',      height: imgH + 'rpx'    }        return (      <Block>        <Image          className='image--not-loaded'          style={Object.assign({ display: loaded ? 'none' : 'auto' }, style)}          lazyLoad          mode='aspectFill'          onLoad={this.toggleThumbLoaded.bind(this)}          src={compressImage(imgU, '10x' + parseInt(imgH * 10 / imgW))}        />        {thumbLoaded && (          <Image            style={Object.assign({ display: loaded ? 'auto' : 'none' }, style)}            lazyLoad            className='image--is-loaded'            mode='aspectFill'            src={imgU}            onLoad={this.toggleOriginLoaded.bind(this)}          />        )}      </Block>    );  }

以上为主要视图层和逻辑层代码,其中compressImage函数是用来处理图片剪裁也就是缩略图的生成的,(ps:我们是用nginx实现的动态压缩,裁剪等功能,有需要的小伙伴可以自行搜索相关教程~)

主要逻辑处理完成之后我们再来看模糊样式的处理,在此就要介绍一个 css 方法 blur():blur() CSS方法将高斯模糊应用于输出图片。它只有一个接受一个参数blur(radius)

了解了这个方法之后,就让我们来愉快的玩耍(写代码)吧~ 我们可以给这个效果添加一个小动画,让它看起来更有意思哦~

.image--not-loaded{  // fix ios 缺少重绘的问题,添加无意义的transform强制触发重绘  transform: scale(1);  filter:blur(30px);}.image--is-loaded{  // fix ios 缺少重绘的问题,添加无意义的transform强制触发重绘  transform: scale(1);  filter:blur(20px);  animation: sharpen 0.8s both;}@keyframes sharpen {  0% {    filter: blur(20px);  }  100% {    filter: blur(0px);  }}

需要注意的是blur方法在ios上会出现无法正确展示的问题,查询了相关文章后发现是因为ios 缺少重绘,就是ios不会根据这个代码重新绘制页面因此不能正确展示,如果要解决这个问题只要给他加上一条没有意义的transform,强制触发重绘就可以了~

效果图如下: 5571f524-1f57-43da-

原文作者:Rolan

原文链接:http://www.wxapp-union.com/article-5815-1.html

好课推荐

「人人都会微信小程序」

超低门槛 快速上手

带你打造属于自己的小程序

课程原价49

现在参与拼团只需4.9

点击阅读原文

立刻拼团学习

若需了解更多

请扫码添加小助手咨询

也可直接查找微信号:TencentNext

▲ NEXT学院 官方课程助教 ▲

给我【在看】

你也越好看!

本文分享自微信公众号 - 腾讯NEXT学院(Next_Academy)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 编程新手:看懂很多示例,却依然写不好一个程序

    腾讯NEXT学位
  • 2017前端技术大盘点!

    腾讯NEXT学位
  • 小程序的底层框架

    ? | 导语  前端的框架太多让人眼花缭乱,很多相似的地方,优秀的地方大家都会借鉴,同时又会有各自的一些特点。小程序也好,其他框架也好,理解他们的设计缘由、实...

    腾讯NEXT学位
  • ICCV2019 Oral论文:基于图嵌入的深度图匹配(已开源)

    由上海交通大学研究团队独立完成的论文Learning CombinatorialEmbedding Networks for Deep Graph Matchi...

    SIGAI学习与实践平台
  • ICCV2019 Oral论文:基于图嵌入的深度图匹配(已开源)

    由上海交通大学研究团队独立完成的论文Learning CombinatorialEmbedding Networks for Deep Graph Matchi...

    小白学视觉
  • 3COM SS3 4400系列交换机VL

       除了基本的数据交换功能,VLAN是在配置交换机中碰到最多的。虽然SS3 4400仅是一个二层交换机系列,但它仍可以配置基于端口的VLAN。下面举两个例子来...

    py3study
  • 一加手机3今天正式亮相工信部,“证件照”和配置信息双双曝光

    镁客网
  • Roslyn 入门:使用 .NET Core 版本的 Roslyn 编译并执行跨平台的静态的源码

    发布于 2018-05-25 13:24 更新于 2018-06...

    walterlv
  • 记一次被DDoS敲诈的历程

    之前一个蜀国的朋友业务被DDOS攻击,业务服务被机房断网,客户单流失有经济损失,这篇具体说的就是这件事情。

    糖果
  • 微信朋友圈集赞神器,3分钟拿到商家礼品

    一键点赞效果就像上图一样哈!是不是很真实和别人点赞截图没什么区别呀!还可以加上定位功能就更真实了。

    IT小侠公社

扫码关注云+社区

领取腾讯云代金券