The scene again

In the micro channel applet, the Image component is used to display the picture, the picture source can use local resources, can also come from the server resources. Typically, for the dynamic presentation of content, the data used needs to be retrieved from the interface through a network request. If the network is slow, the image loading process may be very slow, and the page will be blank because there is no data before the request is completed, which is a very poor user experience.

Realize the principle of

The Image component of the applet has two properties that we can refer to:

We can implement these two events:

  • Implementation of bindload, in the picture is not loaded when the completion, show the placeholder map, once the load is completed, immediately hide the placeholder map, show the real business picture

  • Implement Binderror to display a placeholder map when an image load error occurs.

The specific implementation

Prepare a placeholder map in advance and place it in your root images folder.

Custom componentsimage-load

In order to facilitate reuse, reduce the amount of code, and improve the maintainability, the function is encapsulated into a component for subsequent use. Create a Components folder in the project root directory and create a new image-load component:

writeimage-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 : ""}}' />Copy the code

index.js

Component({properties: {defaultImage: String,// defaultImage originalImage: String,// requested image width: String, height: String, mode: String }, data: { finishedFlag: false }, methods: { finishLoad: function(e) { this.setData({ finishedFlag: true }) } } })Copy the code

index.json

{
  "component": true,
  "usingComponents": {}
}
Copy the code

index.wxss

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

Page reference

Use the image-load component on the home page pages/index:

Enable component in index.json:

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

Components used in index.wxml:

Default-image is the default image, put your own placeholder map, original-image is the data image that needs to be loaded, be sure to set the width and height of the photo, otherwise the picture will not come out

<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>Copy the code

conclusion

The above are all the steps and methods of pre-loading placeholder pictures in wechat small programs. In the future, the development and production process of homepage skeleton Control will be pushed. Please keep paying attention to it

Creation is not easy, click like, encourage it ~