미니 프로그램 로더 구현: 요청 시 원격 이미지 리소스 사전 로드

이 기사의 내용은 미니 프로그램 로더의 구현에 관한 것입니다. 요청 시 원격 이미지 리소스를 미리 로드하는 것입니다. 이는 특정 참조 값을 가지고 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

최근 H5 개발을 하다가 문제가 생겼습니다. 페이지 오픈 시 대용량 이미지 로딩이 느려지는 것을 방지하기 위해 사진 리소스 관리자를 작성해서 오늘 미니 프로그램 버전으로 구현했습니다.

특별 참고 사항, 미니 프로그램의 리소스 패키지 크기 제한으로 인해 많은 이미지 리소스가 CND 이미지 서버에 저장됩니다. 미니 프로그램 초기화 중 필요에 따라 원격 이미지 리소스를 로드하려면 다음 로더가 필요합니다. 미니 프로그램의 일부 문제를 해결하기 위해 구현되었습니다. 새로운 개발자는 이미지를 미리 로드하는 데 어려움을 겪습니다.

특별 강조:

이 로더는 예비 버전이며 다른 구현 방법은 아직 연구되지 않았습니다. 현재 구현 방법은 WeChat 공개 플랫폼->설정->에 추가되어야 합니다. downloadFile 법적 도메인 이름 로드하려는 이미지가 있는 서버의 법적 도메인 이름입니다.

원리 소개:

미니 프로그램의 자체 API를 사용하여 원격 이미지 리소스를 읽습니다.

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

이 인터페이스는 이미지 구성 요소 개체를 생성하고 이미지 로딩 상태를 반환할 수 있습니다.

로더 사용법:

1. app.js와 동일한 디렉터리에 이미지 리소스에 대한 경로 관리 파일로 ImageSource.js를 생성합니다(상황에 따라 다른 파일 이름으로 변경 가능).

2. utils 폴더에 ImageLoader.js 또는 ImageLoader.min.js(첨부파일)를 넣습니다.

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);
 }
 });

Parameters

base: 문자열 이미지 리소스 기본 경로의 필수 예: "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() 객체의 로드 및 로드된 콜백에서 이미지 사전 로드의 최종 상태, 총 개수, 성공적으로 로드된 이미지 수 성공, 실패한 이미지 수를 확인할 수 있습니다. 및 이미지 로딩에 소요되는 총 비용입니다. 시간 비용(단위: ms).

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

이미지 로드 요청을 다시 시작하지 않고도 페이지의 이미지가 즉시 표시됩니다.

관련 권장 사항:

JS는 기다리지 않고 이미지를 미리 로드할 수 있습니다

class_image 특수 효과를 미리 로드하는 또 다른 컴팩트 이미지

위 내용은 미니 프로그램 로더 구현: 요청 시 원격 이미지 리소스 사전 로드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!