小甜点：微信小程序预加载占位图片

场景重现

在微信小程序中，使用Image组件来展示图片，图片源可以使用本地资源，也可以来自服务器资源。通常情况下，为了内容的动态展示，需要通过网络请求从接口中获取所用的数据。如果在网络慢的情况下，image加载图片的过程可能会非常慢，在请求完成之前页面都会因为没有数据而呈现一片空白，这是非常差的用户体验。

实现原理

小程序的Image组件有两个属性，可以供我们参考：

image属性.png

我们可以实现这两个事件：

实现bindload，在图片未加载完成时，显示占位图，一旦加载完成，马上隐藏占位图，显示真正的业务图片
实现binderror，在图片加载错误时，显示占位图。

具体实现

提前准备好一张占位图，放在根目录images文件夹中。

自定义组件`image-load`

为方便复用，减少代码量，提高可维护性，将该功能封装成一个组件，方便后续使用。在项目的根目录下创建components文件夹，并新建image-load组件：

组件.png

编写 `image-load`

index.wxml

<image wx:if='{{!finishedFlag}}' mode='{{mode}}' src='{{defaultImage}}'
  style='{{width ? "width:" + width : ""}};{{height ? "height:" + height : ""}}' />
<image mode='{{mode}}' class='{{finishedFlag ? "" : "before-load"}}' src='{{originalImage}}' bindload='finishLoad'
  style='{{finishedFlag && width ? "width:" + width : ""}};{{finishedFlag && height ? "height:" + height : ""}}' />

index.js

Component({
  properties: {
    defaultImage: String, //默认图片
    originalImage: String,//请求的图片
    width: String,
    height: String,
    mode: String
  },
  data: {
    finishedFlag: false
  },
  methods: {
    finishLoad: function(e) {
      this.setData({
        finishedFlag: true
      })
    }
  }
})

index.json

{
  "component": true,
  "usingComponents": {}
}

index.wxss

.before-load {
  width: 0;
  height: 0;
  opacity: 0;
}

页面引用

在主页面pages/index中使用image-load组件：

index.json中启用组件：

"usingComponents": {
    "image-load": "../../components/image-load/index"
  }

index.wxml中使用组件：

default-image是默认图片，放入自己的占位图， original-image是需要加载的数据图片， 一定要设置照片的宽高,不然图片出不来哦~

<view wx:for="{{banners}}" wx:key="index">
    <image-load class="leftImg" default-image="../../images/image_load.png" mode='aspectFill'
               original-image="{{ item.url }}" width="100%" height="280rpx" />
</view>

总结

以上就是微信小程序预加载占位图片的全部使用步骤和方法，后续还会推送首页骨架屛的开发制作过程，请持续关注哦~

创作不易，点个赞，鼓励一下吧~