微信小程序——圖片模糊加載整個過程（默認圖>縮略圖>原圖）

圖片加載的整個過程是這樣的，當進入一個頁面一般我們是沒有圖片鏈接的，所以需要先調用接口獲取圖片鏈接，再將圖片加載渲染到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;
}