Это собственный компонент предварительной загрузки изображений, подходящий для мини-программ WeChat ( если вы используете Taro, перейдите в ветку taro . Он использовался во многих мини-программах, таких как JD Shopping). Этапы использования следующие:
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 и передайте его (текущий объект Page). Второй параметр является необязательным и является методом обратного вызова по умолчанию для завершения загрузки изображения.
this . imgLoader = new ImgLoader ( this )
5. Вызовите метод загрузки экземпляра ImgLoader для загрузки изображения. Первый параметр — это ссылка на изображение, а второй параметр является необязательным и представляет собой метод обратного вызова при загрузке изображения.
this . imgLoader . load ( imgUrlOriginal , ( err , data ) => {
console . log ( '图片加载完成' , err , data . src , data . width , data . height )
} )
Примечание. Первым параметром метода обратного вызова после завершения загрузки изображения является сообщение об ошибке (нуль, если загрузка прошла успешно), а вторым параметром является информация об изображении (тип объекта, включая источник, ширину и высоту).
Методы использования см. в примерах в демонстрационном каталоге, включая сценарии загрузки одного и нескольких изображений. Эффект выполнения показан на рисунке ниже:
-эоф-