As you can see from the title, wxapp-img-loader is a plug-in for pre-loading picture components of WeChat applet and has been applied in Jingdong Shopping Applet Edition.The following steps are used:
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. Introducing Component Scripts into the JS Files of Pages

const ImgLoader = require('../../img-loader/img-loader.js')

4. Instantiate an ImgLoader object and pass in this (the current Page object). The second parameter is optional. Load the completed callback method for the default picture

this.imgLoader = new ImgLoader(this)

5. Call the load method of the ImgLoader instance to load the picture. The first parameter is the picture link, the second parameter is optional, and the callback method when the loading of the picture is complete

this.imgLoader.load(imgUrlOriginal, (err, data) => {
    console.log('Picture loading complete', err, data.src, data.width, data.height)
})

Note: The first parameter of the callback method for picture loading is error information (null for successful loading) and the second parameter is picture information (Object type, including src, width, and height).
6. Example of picture loading mode
(1) Load multiple pictures
js:

//Introduce Picture Preload Component
const ImgLoader = require('../../img-loader/img-loader.js')

//Generate some test data
function genImgListData() {
    let images = [
        'http://img10.360buyimg.com/img/s600x600_jfs/t3586/215/2086933702/144606/c5885c8b/583e2f08N13aa7762.png',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3643/111/394078676/159202/a59f6b72/5809b3ccN41e5e01f.jpg',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3388/167/1949827805/115796/6ad813/583660fbNe5c34eae.jpg',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3163/281/5203602423/192427/db09be58/5865cb7eN808cc6f4.png',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3634/225/410542226/185677/c17f0ecf/5809b073N364fe77e.jpg',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3808/206/329427377/119593/a8cf7470/580df323Nb641ab96.jpg',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3805/133/325945617/116002/e90e0bdf/580df2b5Ncb04c5ac.jpg',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3046/316/3037048447/184004/706c779e/57eb584fN4f8b6502.jpg',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3580/212/1841964843/369414/e78739fb/58351586Ne20ac82a.jpg',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3274/70/4925773051/133266/fae6e84/585c9890Na19001c8.png',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3157/27/5204515328/123020/5f061d81/5865cbcaNfdf0557f.png',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3265/341/5152556931/143928/bdf279a4/5865cb96Nff26fc5d.png'
    ]
    images = images.concat(images.slice(0, 4))
    return images.map(item => {
        return {
            url: item,
            loaded: false
        }
    })
}

Page({
    data: {
        imgList: genImgListData()
    },
    onLoad() {
        //Initialize picture preload components and specify uniform load completion callbacks
        this.imgLoader = new ImgLoader(this, this.imageOnLoad.bind(this))
    },
    loadImages() {
        //Launch loading of all pictures at the same time
        this.data.imgList.forEach(item => {
            this.imgLoader.load(item.url)
        })
    },
    //Callback after loading
    imageOnLoad(err, data) {
        console.log('Picture loading complete', err, data.src)

        const imgList = this.data.imgList.map(item => {
            if (item.url == data.src)
                item.loaded = true
            return item
        })
        this.setData({ imgList })
    }
})

wxml:

<view class="img_list">
    <view wx:for="{{ imgList }}" class="img_wrap">
        <image wx:if="{{ item.loaded }}" src="{{ item.url }}" class="fade_in" />
    </view>
</view>

<button bindtap="loadImages">Click To Load Images</button>

<!-- Introduce Picture Preload Component -->
<import src="../../img-loader/img-loader.wxml"/>
<template is="img-loader" data="{{ imgLoadList }}"></template>

wxss:

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.img_list {
    margin: 10px 0;
    text-align: center;
}

.img_wrap {
    display: inline-block;
    width: 185rpx;
    height: 185rpx;
}

image {
    width: 100%;
    height: 100%;
}

.fade_in {
    animation: fadeIn 1s both;
}

Design sketch:

(2) Load a single picture
js:

//Introduce Picture Preload Component
const ImgLoader = require('../../img-loader/img-loader.js')

//thumbnail 80x50 3KB
const imgUrlThumbnail = 'http://storage.360buyimg.com/mtd/home/lion1483683731203.jpg'
//Original Map 3200x2000 1.6MB
const imgUrlOriginal = 'http://storage.360buyimg.com/mtd/home/lion1483624894660.jpg'

Page({
    data: {
        msg: '',
        imgUrl: ''
    },
    onLoad() {
        //Initialize Picture Preload Component
        this.imgLoader = new ImgLoader(this)
    },
    loadImage() {
        //Load thumbnails
        this.setData({
            msg: 'Big picture is loading desperately..',
            imgUrl: imgUrlThumbnail
        })

        //At the same time, the original diagram is preloaded and replaced after successful loading
        this.imgLoader.load(imgUrlOriginal, (err, data) => {
            console.log('Picture loading complete', err, data.src)
            this.setData({ msg: 'Large Image Loading Completed~' })

            if (!err)
                this.setData({ imgUrl: data.src })
        })
    }
})

wxml:

<view class="img_wrap">
    <image wx:if="{{ imgUrl }}" src="{{ imgUrl }}" />
</view>

<button bindtap="loadImage">Click To Load Image</button>

<view class="msg">{{ msg }}</view>

<!-- Introduce Picture Preload Component -->
<import src="../../img-loader/img-loader.wxml"/>
<template is="img-loader" data="{{ imgLoadList }}"></template>

wxss:

.img_wrap {
    margin-bottom: 10px;
    width: 750rpx;
    height: 468rpx;
    background: #ececec;
}

image {
    width: 100%;
    height: 100%;
}

.msg {
    margin: 10px 0;
    text-align: center;
}

Design sketch:

Note: If you do not want to display pictures, you can use styles to hide them.Source Program Reference https://github.com/o2team/wxapp-img-loader.