wxapp img loader

wxapp-img-로더

위챗 미니 프로그램에 적합한 네이티브 이미지 프리로딩 컴포넌트입니다. ( 타로를 사용하고 계시다면 타로 브랜치로 이동해주세요 .) JD쇼핑 등 많은 미니 프로그램에서 사용되어 왔습니다. 사용 단계는 다음과 같습니다.

1. img-loader 디렉터리를 프로젝트에 복사합니다.

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

 < import src =" ../../img-loader/img-loader.wxml " />
< template is =" img-loader " data =" {{ imgLoadList }} " > </ template >

3. 페이지의 JS 파일에 구성요소 스크립트를 도입합니다.

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

4. ImgLoader 개체를 인스턴스화하고 이(현재 페이지 개체)를 전달합니다. 두 번째 매개 변수는 선택 사항이며 이미지 로드 완료를 위한 기본 콜백 메서드입니다.

 this . imgLoader = new ImgLoader ( this )

5. ImgLoader 인스턴스의 로드 메소드를 호출하여 이미지를 로드합니다. 첫 번째 매개변수는 이미지 링크이고, 두 번째 매개변수는 선택사항이며 이미지가 로드될 때의 콜백 메소드입니다.

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

참고: 이미지 로딩 완료 후 콜백 메소드의 첫 번째 파라미터는 오류 메시지(로딩 성공 시 null)이고, 두 번째 파라미터는 이미지 정보(src, 너비, 높이를 포함한 개체 유형)입니다.

사용 방법은 단일 이미지 로드 및 여러 이미지 로드 시나리오를 포함하여 데모 디렉터리의 예를 참조하세요. 실행 효과는 아래 그림과 같습니다.

-eof-