Introduction to the use of the image preloading component wxapp-img-loader in WeChat applet

This article brings you an introduction to the use of the image preloading component wxapp-img-loader in the WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

Since the WeChat applet does not provide JS objects like Image, it is more troublesome to preload images. The wxapp-img-loader custom component can implement image preloading in the WeChat applet. Function.

Use

1. Download the wxapp-img-loader project source code (https://github.com/o2team/wxa...), and transfer img- Copy the loader directory to your project

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

<import></import>
<template></template>

3. Introduce the component script 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 callback method for the default image loading completion.

this.imgLoader = new ImgLoader(this)

5. Call ImgLoader The load method of the instance loads 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. 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).

this.imgLoader.load(imgUrlOriginal, (err, data) => {    console.log('图片加载完成', err, data.src, data.width, data.height)
})

wxapp-img-loader component can load a single image or multiple images.

running result:

Other

wxapp-img-loader project address: https://github.com/o2team/wxa...

The above is the detailed content of Introduction to the use of the image preloading component wxapp-img-loader in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!