The image preloading component suitable for WeChat mini programs has been applied to the JD shopping mini program version. The usage steps are as follows:

1. Copy the img-loader directory to your project

2. Add the following code to the WXML file of the page to introduce the component template

<import src="../../img-loader/img-loader.wxml"/>
<template is="img-loader" data="{{ imgLoadList }}"></template>
3. Introduce component scripts into the JS file of the page

const ImgLoader = require('../../img-loader/img-loader.js')
4. Instantiate an ImgLoader object and pass in this (current Page object). The second parameter is optional and is the default callback method for image loading completion

this.imgLoader = new ImgLoader(this)
5. Call the load method of the ImgLoader instance to load the image. The first parameter is the image link, and the second parameter is optional and is the callback method when the image is loaded

this.imgLoader.load(imgUrlOriginal, (err, data) => {
console.log('Image loading completed', err, data.src, data.width, data.height)
})
Note: The first parameter of the callback method when the image loading is completed is the error message (null if the loading is successful), and the second parameter is the image information (Object type, including src, width and height).