微信小程序——图片模糊加载整个过程（默认图>缩略图>原图）

图片加载的整个过程是这样的，当进入一个页面一般我们是没有图片链接的，所以需要先调用接口获取图片链接，再将图片加载渲染到image上，图片一般采用1.5倍资源图，所以大小都在30kb左右，这样图片加载渲染的时间非常短，可以忽略，但是碰到特殊需求尺寸非常大的图片就不能忽略，因此整个过程是这样的：
进入页面>>获取图片链接>>加载完毕
小图解决方案：
进入页面>>加载本地默认图片>>获取到图片链接>>加载渲染完图片
大图解决方案：
进入页面>>加载本地默认图片>>获取原图及缩略图链接>>加载缩略图（模糊处理）>>加载原图
效果：

大概思路就是这样，实际情况可再处理一些细节
去体验：

代码：
js

Page({

  data: {
    isLoaded:false,
    isGetUrl:false,
    isLoadedTem:false,
    lazyImageOri:"",
    lazyImageTem:"",
    times:0
  },

  onLoad: function (options) {
    var that = this
    var timeId1 = setTimeout(function () {
      that.setData({
lazyImageOri:"cloud://normal-en24598/meinv/kisspng-circle-picture-frame-clip-art-squid-ring-frame-5a8bd0bd1674f9.154165811519112381092.png",    lazyImageTem:"cloud://normal-e00924598/meinv/kisspng-circle-picture-frame-clip-art-squid-ring-frame-5a8bd0bd1674f9.154165811519112381092副本.jpg",
isGetUrl:true
      })
      clearTimeout(timeId1)
    }, 1000)
  },
  loadTem() {
    var times = this.data.times
    times++
    this.data.times = times
    if (this.data.times%2 == 0){
      this.setData({
        isLoadedTem: true
      })
    }
  },
  loadOri(e){
    this.setData({
      isLoaded:true
    })
  }

wxml

<view class="container">
    <image wx:if="{{isGetUrl}}" class="image-lazy"  mode="aspectFit" src="{{lazyImageOri}}" bindload="loadOri"></image>
    <image wx:if="{{!isLoaded}}" style="filter:blur({{isLoadedTem?6:0}}px)" class="image-lazy" mode="aspectFit" src="{{isGetUrl?lazyImageTem:'./lazyDemo.png'}}" bindload="loadTem"></image>
</view>

wxss

.image-lazy{
  margin-top: 100rpx;
  width: 100%;
  height:500rpx;
  position: absolute;
  z-index: 10;
}