Implementierung eines Mini-Programmladers: Vorladen von Remote-Bildressourcen bei Bedarf

Der Inhalt dieses Artikels befasst sich mit der Implementierung des Mini-Programmladers: Vorabladen von Remote-Bildressourcen, der einen gewissen Referenzwert hat. Ich hoffe, er wird Ihnen hilfreich sein.

Ich bin kürzlich bei der H5-Entwicklung auf ein Problem gestoßen, um das langsame Laden großer Bilder beim Öffnen der Seite zu verhindern, habe ich einen Bildressourcenmanager geschrieben und ihn heute übrigens MiniprogrammVersion.

Besonderer Hinweis: Aufgrund der Größenbeschränkung der Ressourcenpakete des Miniprogramms werden viele Bildressourcen auf dem CND-Bildserver gespeichert, um bei Bedarf während der Initialisierung des Miniprogramms Remote-Bildressourcen zu laden. Der folgende Loader wurde implementiert. Ich hoffe, er kann das Problem des Vorladens von Bildern für einige neue Miniprogrammentwickler lösen.

Besonderer Schwerpunkt:

Dieser Loader ist eine vorläufige Version und andere Implementierungsmethoden wurden noch nicht untersucht. Die aktuelle Implementierungsmethode muss auf der

sein Öffentliche WeChat-Plattform- >Einstellen->legalen Domänennamen für downloadFile, fügen Sie den legalen Domänennamen des Servers hinzu, auf dem sich das Bild befindet, das Sie laden möchten.

Prinzipielle Einführung:

Verwenden Sie die eigene API des Miniprogramms, um Remote-Bildressourcen zu lesen:

wx.getImageInfo({
 src: 'images/a.jpg',
 success: function (res) {
 console.log(res.width)
 console.log(res.height)
 }
})

Diese Schnittstelle kann Bildkomponentenobjekte erstellen und Bilder zurückgeben Ladestatus.

Loader-Verwendung:

1. Erstellen Sie eine ImageSource.js im gleichen Ebenenverzeichnis von app.js wie die Pfadverwaltungsdatei für Bildressourcen (kann entsprechend geändert werden). (wie bei anderen Dateinamen).

2. Platzieren Sie ImageLoader.js oder ImageLoader.min.js (Anhang) im Ordner utils.

3. Erstellen Sie nach Bedarf ein ImageLoader-Objekt in der entsprechenden Datei (siehe unten).

Verwendungsbeispiel:

1. Ladedatei:

const ImageLoader = require('./utils/ImageLoader.min.js');
const ImageSource = require('./imageSource.js');

ImageLoader.min.js ist die Loader-Quelldatei.

imageSource.js ist die Bildressourcenpfaddatei.

2. Erstellen Sie ein ImageLoader-Objekt.

new ImageLoader({
 base: ImageSource.BASE,
 source: [ImageSource],
 loading: res => {
 // 可以做进度条动画
 console.log(res);
 },
 loaded: res => {
 // 可以加载完毕动画
 console.log(res);
 }
 });

Parameter

base: String Der Basispfad der Bildressource ist erforderlich. Beispiel: „https://image.example.com/static/images/“

Quelle: Array Erforderliches Beispiel für Bildressourcen, die vorab geladen werden müssen: [ImageSource.banners, ImageSource.imageList]

Laden: Funktion Nicht erforderliches Beispiel für eine Rückrufmethode beim Laden von Bildern:

geladen: Funktionsbild Nicht erforderliches Beispiel für einen Rückruf nach Abschluss der Aufzeichnung:

Loader (ImageLoader.js) Quellcode:

let base = 0;
let Img = function(src) {
 this.src = src;
 this.status = false;
 this.fail = false;
}
 
let loop = (o, res) => {
 let tem = Object.keys(o);
 tem.map(v => {
 if (typeof o[v] === 'object') {
 loop(o[v], res);
 } else {
 if(v === 'BASE') {
 base = o[v];
 } else {
 res.push(o[v]);
 }
 }
 });
}
 
function ImageLoader(obj) {
 let arr = [];  if(obj.loading) {
 this.loadingcallback = obj.loading;
 }
 if(obj.loaded) {
 this.loadedcallback = obj.loaded;
 }
 
 if(obj.base) {
 base = obj.base
 }
 this.insert = (item) => {
 arr.push(item);
 };
 
 this.init = (o) => {
 let res = [];
 loop(o, res);
 console.log(res)
 res.map((v) => {
 this.insert(new Img(v));
 });
 this.load();
 };
 
 this.load = () => {
 this.start = (new Date).getTime();
 arr.map((v) => {
 let src = base ? base + v.src: v.src;
 wx.getImageInfo({
 src: src,
 success: res => {
 v.status = true;
 },
 fail: err => {
 v.fail = true;
 }
 })
 });
 let timer = setInterval(() => {
 let status = this.isLoaded();
 if (status) {
 clearTimeout(timer);
 }
 }, 200);
 
 setTimeout(() => {
 clearTimeout(timer);
 }, 60000);
 };
 
 this.isLoaded = () => {
 let status = true,
 count = 0,
 fail = 0;
 arr.map((v) => {
 if (!v.status) {
 status = false;
 } else {
 count += 1;
 }
 if(v.fail) {
 status = true;
 fail += 1;
 }
 });
 if(status) {
 if(this.loadedcallback) {
 this.loadedcallback({
 status: true,
 timecost: (new Date).getTime() - this.start,
 success: count,
 fail: fail,
 totalcount: arr.length
 })
 }
 } else {
 if(this.loadingcallback) {
 this.loadingcallback({
 status: false,
 percent: count / arr.length
 });
 }
 }
 return status;
 };
 if(obj.source) {
 this.init(obj.source);
 }
}
module.exports = ImageLoader

Bildressourcenpfaddatei (imageSource.js) Quellcode:

module.exports = {
 "BASE": "https://img.caibeitv.com/static_project/teacherTest/static/img/",
 "single1": "ghost.4449aa4.png",
 "single2": "ghost.4449aa4.png",
 "single3": "ghost.4449aa4.png",
 "single4": "ghost.4449aa4.png",
 "pages": {
 "index": ["ghost.4449aa4.png", "ghost.4449aa4.png"],
 "user": ["ghost.4449aa4.png", "ghost.4449aa4.png"],
 "home": ["ghost.4449aa4.png", "ghost.4449aa4.png"],
 "login": ["ghost.4449aa4.png", "ghost.4449aa4.png"]
 },
 "imageList": [
 "ghost.4449aa4.png",
 "ghost.4449aa4.png",
 "ghost.4449aa4.png",
 "ghost.4449aa4.png",
 "ghost.4449aa4.png"
 ],
 "folders": {
 "page1": "ghost.4449aa4.png",
 "page2": "ghost.4449aa4.png",
 "inner": [
 "ghost.4449aa4.png",
 "ghost.4449aa4.png"
 ],
 "home": {
 "poster": "ghost.4449aa4.png"
 }
 }
}

Anweisungen:

BASE-Feld ist entsprechend Ihren eigenen Anforderungen auszufüllen.

Andere unterstützte Bildressourcen:

1. Schreiben Sie den Bildpfad direkt in Form von Schlüssel: Wert, wie zum Beispiel:

"single1": "ghost.4449aa4.png"

2. Schreiben Sie den Bildpfad jeder Seite. Remote-Ressourcen werden zur einfachen Referenz und Verwaltung an den entsprechenden Speicherort geschrieben, z. B.:

"pages": {
 "index": ["ghost.4449aa4.png", "ghost.4449aa4.png"],
 "user": ["ghost.4449aa4.png", "ghost.4449aa4.png"],
 "home": ["ghost.4449aa4.png", "ghost.4449aa4.png"],
 "login": ["ghost.4449aa4.png", "ghost.4449aa4.png"]
 },

3. Stapeln Sie die Bilder direkt in einem Array im Array-Modus, z. B.:

"imageList": [
 "ghost.4449aa4.png",
 "ghost.4449aa4.png",
 "ghost.4449aa4.png",
 "ghost.4449aa4.png",
 "ghost.4449aa4.png"
 ]

4. Zufälliges Ressourcenarray, Objektverschachtelung, wie zum Beispiel:

"folders": {
 "page1": "ghost.4449aa4.png",
 "page2": "ghost.4449aa4.png",
 "inner": [
 "ghost.4449aa4.png",
 "ghost.4449aa4.png"
 ],
 "home": {
 "poster": "ghost.4449aa4.png"
 }
 }

Damit ist die Konfiguration des gesamten Remote-Image-Ressourcenladers abgeschlossen. Sie können den endgültigen Status des Bildvorladens in den Lade- und Laderückrufen sehen des neuen ImageLoader()-Objektstatus, die Gesamtanzahl, die Anzahl der erfolgreich geladenen Bilder, die Anzahl der Bilder, deren Laden fehlgeschlagen ist, und die Gesamtzeitkosten für das Laden von Bildern (Einheit ms).

Anweisungen für das Quellfeld beim Erstellen eines ImageLoader-Objekts:

new ImageLoader({
base: ImageSource.BASE,
source: [ImageSource],
loading: res => {
// 可以做进度条动画
console.log(res);
},
loaded: res => {
// 可以加载完毕动画
console.log(res);
}
});

Das Quellfeld akzeptiert einen Parameter vom Typ Array, basierend auf der Konfiguration in

imageSource.js oben Mit

const ImageSource = require('./imageSource.js');

können viele verschiedene Datenformate importiert werden. Daher kann bei der Konfiguration des Quellfelds das gesamte ImageSource-Objekt direkt in < eingefügt werden 🎜>

source: [ImageSource]

Sie können auch nur einen Teil der Ressourcen entsprechend den Anforderungen des Projekts laden, wie zum Beispiel:

source: [ImageSource.imageList, ImageSource.single2]

Auf diese Weise lädt der Loader während der Ausführung nur den in der Quelle geschriebenen Teil , und nicht die gesamte ImageSource.

Wenn der Ladevorgang zu zeitaufwändig ist, können Sie die Ressourcen in onLoad für jede Seite separat laden. Die Methode ähnelt dem Aufruf in der App. Das Beispiel dieses Artikels ist in onLaunch geschrieben app.js . Wenn die Ladezeit zu lang ist, können Sie einen Fortschrittsbalken oder eine Ladeanimation erstellen, um das Starterlebnis zu optimieren. Die vorinstallierten Bilder werden im WeChat-Speicher zwischengespeichert, bis der Miniprogrammprozess geschlossen wird, sodass die Bilder direkt auf nachfolgenden Seiten verwendet werden können.

const app = getApp();
const imgSource = require('../../imageSource.js');
Page({
 data: {
 base: imgSource.BASE,
 src: imgSource.single1
 },
 onLoad: function () {
 console.log(imgSource)
 }
})

Das Bild auf der Seite wird sofort angezeigt, ohne dass die Bildladeanfrage erneut gestartet werden muss.

Verwandte Empfehlungen:

JS implementiert das Vorladen von Bildern ohne Wartezeit

Eine weitere kompakte Klasse zum Vorladen von Bildern_Abb >

Das obige ist der detaillierte Inhalt vonImplementierung eines Mini-Programmladers: Vorladen von Remote-Bildressourcen bei Bedarf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!