WeChat 애플릿의 이미지 사전 로딩 구성 요소 wxapp-img-loader 사용 소개

이 글은 WeChat 애플릿의 이미지 사전 로딩 구성 요소인 wxapp-img-loader의 사용 방법을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다. .

WeChat 애플릿은 이미지와 같은 JS 개체를 제공하지 않으므로 이미지를 미리 로드하는 것이 더 번거롭습니다. wxapp-img-loader 사용자 정의 구성 요소는 WeChat 이미지 미리 로드에서 구현할 수 있습니다. 기능.

사용

1. wxapp-img-loader 프로젝트 소스 코드를 다운로드합니다(https://github.com/o2team/wxa. .. .) img-loader 디렉토리를 프로젝트

2에 복사합니다. 페이지의 WXML 파일에 다음 코드를 추가하고 구성 요소 템플릿

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

3을 도입합니다. .

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

4 페이지의 JS 파일에 구성요소 스크립트를 도입합니다. ImgLoader 객체를 인스턴스화하고 이(현재 페이지 객체)를 전달합니다. 두 번째 매개변수는 선택사항이며 이미지 로딩을 위한 기본 콜백입니다. 메소드

this.imgLoader = new ImgLoader(this)

5. ImgLoader 인스턴스의 로드 메소드를 호출하여 이미지를 로드합니다. 첫 번째 매개변수는 이미지 링크이고, 두 번째 매개변수는 선택사항이며 이미지가 있을 때의 콜백 메소드입니다. 짐을 실은. 이미지 로딩 완료 시 콜백 메소드의 첫 번째 파라미터는 오류 메시지(로딩 성공 시 null)이고, 두 번째 파라미터는 이미지 정보(src, 너비, 높이를 포함한 객체 유형)입니다.

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

wxapp-img-loader 구성 요소는 단일 이미지 또는 여러 이미지를 로드할 수 있습니다. ######작동 효과 :#🎜🎜 ## ## ## ## ## ## ## ## ## ## ## ## 🎜🎜# #

Otherwxapp-img-loader 프로젝트 주소: https://github.com/o2team/wxa ..#🎜. 🎜#

위 내용은 WeChat 애플릿의 이미지 사전 로딩 구성 요소 wxapp-img-loader 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!