wxapp img loader

wxapp-img-loader

Il s'agit d'un composant natif de préchargement d'images adapté aux mini-programmes WeChat ( si vous utilisez Taro, veuillez passer à la branche taro ). Il a été utilisé dans de nombreux mini-programmes tels que JD Shopping. Les étapes d'utilisation sont les suivantes :

1. Copiez le répertoire img-loader dans votre projet

2. Ajoutez le code suivant au fichier WXML de la page pour introduire le modèle de composant

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

3. Introduisez les scripts de composants dans le fichier JS de la page

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

4. Instanciez un objet ImgLoader et transmettez-le (objet Page actuel). Le deuxième paramètre est facultatif et constitue la méthode de rappel par défaut pour terminer le chargement de l'image.

 this . imgLoader = new ImgLoader ( this )

5. Appelez la méthode de chargement de l'instance ImgLoader pour charger l'image. Le premier paramètre est le lien de l'image et le deuxième paramètre est facultatif et est la méthode de rappel lorsque l'image est chargée.

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

Remarque : le premier paramètre de la méthode de rappel une fois le chargement de l'image terminé est le message d'erreur (nul si le chargement réussit) et le deuxième paramètre est les informations sur l'image (type d'objet, y compris src, largeur et hauteur).

Pour les méthodes d'utilisation, veuillez vous référer aux exemples dans le répertoire de démonstration, y compris les scénarios de chargement d'une seule image et de chargement de plusieurs images. L'effet d'exécution est comme indiqué dans la figure ci-dessous :

-eof-