Einführung in die Verwendung der Bildvorladekomponente wxapp-img-loader im WeChat-Applet

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung der Bildvorladekomponente wxapp-img-loader im WeChat-Applet. Ich hoffe, dass er für Sie hilfreich ist. helfen.

Da das WeChat-Applet keine JS-Objekte wie Image bereitstellt, ist das Vorladen von Bildern schwieriger. Die benutzerdefinierte Komponente wxapp-img-loader kann das Vorladen von Bildern in der WeChat-Applet-Funktion implementieren.

Verwenden Sie

1. Laden Sie den Quellcode des wxapp-img-loader-Projekts herunter (https://github.com/o2team/wxa...) und ändern Sie ihn img- Kopieren Sie das Loader-Verzeichnis in Ihr Projekt

2. Fügen Sie den folgenden Code zur WXML-Datei der Seite hinzu und führen Sie die Komponentenvorlage in

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

3 ein Datei der Seite

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

4. Instanziieren Sie ein ImgLoader-Objekt und übergeben Sie dieses (aktuelles Seitenobjekt). Der zweite Parameter ist optional und ist die Standardrückrufmethode für den Abschluss des Bildladens

this.imgLoader = new ImgLoader(this)

5 . Rufen Sie ImgLoader auf. Die Lademethode der Instanz lädt das Bild. Der erste Parameter ist der Bildlink, und der zweite Parameter ist optional und die Rückrufmethode beim Laden des Bildes. Der erste Parameter der Rückrufmethode, wenn das Laden des Bildes abgeschlossen ist, ist die Fehlermeldung (null, wenn das Laden erfolgreich ist), und der zweite Parameter sind die Bildinformationen (Objekttyp, einschließlich Quelle, Breite und Höhe).

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

Die wxapp-img-loader-Komponente kann ein einzelnes Bild oder mehrere Bilder laden.

Betriebseffekt:

Andere

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

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung der Bildvorladekomponente wxapp-img-loader im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!