wxapp img loader

cargador-img-wxapp

Este es un componente de precarga de imágenes nativo adecuado para miniprogramas WeChat ( si está utilizando Taro, vaya a la rama taro ). Se ha utilizado en muchos miniprogramas como JD Shopping. Los pasos de uso son los siguientes:

1. Copie el directorio img-loader a su proyecto

2. Agregue el siguiente código al archivo WXML de la página para presentar la plantilla del componente.

 < import src =" ../../img-loader/img-loader.wxml " />
< template is =" img-loader " data =" {{ imgLoadList }} " > </ template >

3. Introduzca los scripts de los componentes en el archivo JS de la página.

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

4. Cree una instancia de un objeto ImgLoader y páselo (objeto de página actual). El segundo parámetro es opcional y es el método de devolución de llamada predeterminado para completar la carga de imágenes.

 this . imgLoader = new ImgLoader ( this )

5. Llame al método de carga de la instancia de ImgLoader para cargar la imagen. El primer parámetro es el enlace de la imagen y el segundo parámetro es opcional y es el método de devolución de llamada cuando se carga la imagen.

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

Nota: El primer parámetro del método de devolución de llamada después de que se completa la carga de la imagen es el mensaje de error (nulo si la carga se realiza correctamente) y el segundo parámetro es la información de la imagen (tipo de objeto, incluido src, ancho y alto).

Para conocer los métodos de uso, consulte los ejemplos en el directorio de demostración, incluidos los escenarios de carga de una sola imagen y carga de varias imágenes. El efecto de ejecución se muestra en la siguiente figura:

-eof-