Implémentation d'un mini chargeur de programme : préchargement des ressources d'images distantes à la demande

Le contenu de cet article concerne la mise en œuvre du mini chargeur de programme : précharger des ressources d'images distantes à la demande, qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

J'ai récemment rencontré un problème lors du développement H5 Afin d'éviter le chargement lent des grandes images lors de l'ouverture de la page, j'ai écrit un gestionnaire de ressources d'images et je l'ai implémenté aujourd'hui d'ailleurs Mini programme<.> version.

Remarque particulière, en raison de la limite de taille des packages de ressources du mini programme, de nombreuses ressources d'image seront stockées sur le serveur d'images CND afin de charger des ressources d'image distantes à la demande lors de l'initialisation du mini programme, le chargeur suivant a été implémenté. J'espère qu'il pourra résoudre le problème du préchargement des images pour certains nouveaux développeurs de mini-programmes.

Emphase particulière :

Ce chargeur est une version préliminaire, et d'autres méthodes d'implémentation n'ont pas encore été étudiées. La méthode d'implémentation actuelle doit être sur le

. Plateforme publique WeChat- >Set->downloadFile nom de domaine légal, ajoutez le nom de domaine légal du serveur où se trouve l'image que vous souhaitez charger.

Introduction au principe :

Utilisez la propre API du mini-programme pour lire les ressources d'images distantes :

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

Cette interface peut créer des objets composants d'image et Revenir à l'état de chargement de l'image.

Utilisation du chargeur :

1. Créez un ImageSource.js dans le répertoire de même niveau d'app.js que le fichier de gestion des chemins pour les ressources d'image (peut être modifié en fonction à la situation pour d'autres noms de fichiers).

2. Placez ImageLoader.js ou ImageLoader.min.js (pièce jointe) dans le dossier utils.

3. Créez un objet ImageLoader dans le fichier correspondant selon vos besoins (voir ci-dessous).

Exemple d'utilisation :

1. Chargement du fichier :

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

ImageLoader.min.js est le fichier source du chargeur.

imageSource.js est le fichier de chemin de ressource image.

2. Créez un objet ImageLoader.

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

Paramètre

base : String Le chemin de base de la ressource image est requis Exemple : "https://image.example.com/static/images/"

.

source : Array Exemple requis de ressources d'image qui doivent être préchargées : [ImageSource.banners, ImageSource.imageList]

chargement : fonction Exemple non requis de méthode de rappel lors du chargement d'image :

chargé : Funciton Exemple de rappel non requis une fois l'enregistrement de l'image terminé :

Code source du chargeur (ImageLoader.js) :

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

Fichier de chemin de ressource image ( imageSource.js) Code source :

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"
 }
 }
}

Instructions :

Le champ BASE est obligatoire et rempli selon vos propres besoins.

Autres ressources d'images prises en charge :

1. Écrivez directement le chemin de l'image sous la forme de clé : valeur, telle que :

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

2. répertoire, écrivez chacune Les ressources distantes de la page sont écrites à l'emplacement correspondant pour une référence et une gestion faciles, telles que :

"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. Empilez directement les images dans un tableau en mode tableau, par exemple :

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

4. Tableaux de ressources arbitraires et imbrication d'objets, tels que :

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

Ceci termine la configuration de l'ensemble du chargeur de ressources d'image distante, qui peut être effectuée lors du chargement, rappel chargé du nouvel objet ImageLoader() Voir l'état final du préchargement de l'image, le nombre total, le nombre d'images chargées avec succès, le nombre d'images ayant échoué à charger et le coût total du temps de chargement des images (en ms).

Description du champ source lors de la création d'un objet ImageLoader :

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

Le champ source accepte un paramètre de type Array, basé sur la configuration dans

imageSource.js ci-dessus , j'ai écrit beaucoup de données dans différents formats. Après avoir utilisé

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

pour l'introduire, vous pouvez directement utiliser ImageSource pour lire chaque partie des données. Par conséquent, lors de la configuration du champ source, vous pouvez. y mettre directement l'intégralité de l'objet ImageSource

source: [ImageSource]

Vous pouvez également charger seulement une partie des ressources en fonction des besoins du projet, comme par exemple :

source: [ImageSource.imageList, ImageSource.single2]

De cette façon, le chargeur chargez uniquement la partie écrite dans la source lors de l'exécution, plutôt que l'intégralité de l'ImageSource.

Enfin, si le processus de chargement prend trop de temps, vous pouvez choisir de charger les ressources séparément dans onLoad de chaque page. La méthode est similaire à l'appel dans app. L'exemple de cet article est écrit dans onLaunch de. app.js . Si le temps de chargement est trop long, vous pouvez créer une barre de progression ou une animation de chargement pour optimiser l'expérience de démarrage. Les images préchargées seront mises en cache dans la mémoire WeChat jusqu'à la fermeture du processus du mini-programme, afin que les images puissent être utilisées directement dans les pages suivantes.

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

L'image sur la page sera affichée immédiatement et il n'est pas nécessaire de relancer une demande de chargement de l'image.

Recommandations associées :

JS implémente le préchargement d'image sans attendre

Une autre classe de préchargement d'image compacte_Fig. >

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!