ホームページ > 記事 > WeChat アプレット > ミニ プログラム ローダーの実装: オンデマンドでリモート画像リソースをプリロード
ミニ プログラム ローダーの実装: オンデマンドでリモート画像リソースをプリロード
- 不言オリジナル
- 2018-09-04 17:16:052250ブラウズ
この記事の内容は、ミニ プログラム ローダーの実装に関するものです。オンデマンドでリモート画像リソースをプリロードするため、必要な方は参考にしていただければ幸いです。
最近、H5開発中に問題が発生しました。ページを開いたときに大きな画像の読み込みが遅くなるのを防ぐために、画像リソースマネージャーを作成し、ミニプログラムバージョンとして今日実装しました。
特別な注意事項として、ミニ プログラムのリソース パッケージ サイズ制限により、多くの画像リソースが CND 画像サーバーに保存されます。ミニ プログラムの初期化中にリモート画像リソースをオンデマンドでロードするために、次のローダーが必要になります。ミニプログラムのいくつかの問題を解決することを期待して実装されました。新しい開発者は画像のプリロードに問題を抱えています。
特別な強調:
このローダーは暫定版であり、他の実装方法はまだ研究されていません。現在の実装方法はWeChatパブリックプラットフォーム->設定->に追加する必要があります。 downloadFile の正当なドメイン名 ロードする画像が配置されているサーバーの正当なドメイン名。
原理の紹介:
ミニプログラム独自の API を使用して、リモート画像リソースを読み取ります:
wx.getImageInfo({
src: 'images/a.jpg',
success: function (res) {
console.log(res.width)
console.log(res.height)
}
})このインターフェイスは、画像コンポーネント オブジェクトを作成し、画像の読み込みステータスを返すことができます。
Loaderの使い方:
1. 画像リソースのパス管理ファイルとしてImageSource.jsをapp.jsと同じディレクトリに作成します(状況に応じて他のファイル名に変更可能)。
2. ImageLoader.js または ImageLoader.min.js (添付ファイル) を utils フォルダーに置きます。
3. 必要に応じて、対応するファイルに ImageLoader オブジェクトを作成します (以下を参照)。
使用例:
1. 読み込みファイル:
const ImageLoader = require('./utils/ImageLoader.min.js'); const ImageSource = require('./imageSource.js');
ImageLoader.min.js がローダーのソースファイルです。
imageSource.js は画像リソースのパス ファイルです。
2. ImageLoader オブジェクトを作成します。
new ImageLoader({
base: ImageSource.BASE,
source: [ImageSource],
loading: res => {
// 可以做进度条动画
console.log(res);
},
loaded: res => {
// 可以加载完毕动画
console.log(res);
}
});パラメータ
base: String 画像リソースのベースパスの必須例: "https://image.example.com/static/images/"
source: Array プリロードする必要がある画像リソースの必須例: [ ImageSource.banners, ImageSource.imageList]
loading: function 画像ロード時のコールバックメソッドの例はオプションです:
loaded: funciton 画像記録完了後のコールバックの例:
Loader (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画像リソースパスファイル (imageSource.js) ソースコード:
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"
}
}
}説明:
BASE フィールドは必須であり、独自のニーズに従って入力されます。
その他の画像リソースのサポート:
1. 次のようなキー:値の形式で画像パスを直接書き込みます:
"single1": "ghost.4449aa4.png"
2. ページ ディレクトリと同様に、各ページのリモート リソースを対応する場所に書き込みます。簡単な参照と管理。例:
"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. 配列モードで画像を直接スタックします。例:
"imageList": [ "ghost.4449aa4.png", "ghost.4449aa4.png", "ghost.4449aa4.png", "ghost.4449aa4.png", "ghost.4449aa4.png" ]
4. ランダムなリソース配列、オブジェクトのネスト。例:
"folders": {
"page1": "ghost.4449aa4.png",
"page2": "ghost.4449aa4.png",
"inner": [
"ghost.4449aa4.png",
"ghost.4449aa4.png"
],
"home": {
"poster": "ghost.4449aa4.png"
}
}これでリモート全体が完了します。画像リソース ローダーの構成については、新しい ImageLoader() オブジェクトのロードおよびロードされたコールバックでのイメージのプリロードの最終ステータス、合計数、正常にロードされたイメージの数 (success)、失敗したイメージの数 (失敗) を確認できます。 、画像読み込みの総コスト (単位: ミリ秒)。
ImageLoader オブジェクトを作成するときのソース フィールドの説明:
new ImageLoader({
base: ImageSource.BASE,
source: [ImageSource],
loading: res => {
// 可以做进度条动画
console.log(res);
},
loaded: res => {
// 可以加载完毕动画
console.log(res);
}
});ソース フィールドは、上記のように imageSource.js の設定を受け入れ、
を使用した後、さまざまな形式のデータが書き込まれます。const ImageSource = require('./imageSource.js');
を導入すると、ImageSourceを使用して各部分のデータを直接読み取ることができるため、ソースフィールドを設定するときに、ImageSourceオブジェクト全体を直接その中に入れることができます
source: [ImageSource]
に従ってリソースの一部のみを読み込むこともできます
source: [ImageSource.imageList, ImageSource.single2]
このローダー 実行中、ImageSource全体ではなく、ソースに書かれた部分のみがロードされます。
最後に、読み込みプロセスに時間がかかりすぎる場合は、各ページの onLoad でリソースを個別に読み込むことを選択できます。この方法は、アプリ内での呼び出しに似ています。この記事の例は、app.js の onLaunch で記述されています。読み込み時間が長すぎる場合は、進行状況バーまたは読み込みアニメーションを作成して、起動エクスペリエンスを最適化できます。プリロードされた画像は、ミニ プログラム プロセスが終了するまで WeChat メモリにキャッシュされるため、後続のページで画像を直接使用できます。
const app = getApp();
const imgSource = require('../../imageSource.js');
Page({
data: {
base: imgSource.BASE,
src: imgSource.single1
},
onLoad: function () {
console.log(imgSource)
}
})ページ上の画像は、画像をロードするリクエストを再度開始することなく、すぐに表示されます。
関連する推奨事項:
class_image 特殊効果をプリロードする別のコンパクトな画像
以上がミニ プログラム ローダーの実装: オンデマンドでリモート画像リソースをプリロードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。