【小程序】 图片下载显示

大图多的场景可以在适当时机提前下载图片到本地，进入后用下载到本地的图片展示

// 一些大图 提前下载到本地 在用本地路径显示
export interface PreloadImageOptions {
    imageUrls: string[];
    success?: Function;
    fail?: Function;
    complete?: Function;
}

export class preloadImage {
    // 下载到本地 下载失败就用原链接
    preloadImage(imageUrl: string) {
        return new Promise((resolve, reject) => {
            uni.downloadFile({
                url: imageUrl,
                success: (res) => {
                    if (res.statusCode === 200) {
                        // 下载成功，resolve
                        resolve(res.tempFilePath);
                    } else {
                        resolve(imageUrl); // 否则返回原地址
                    }
                },
                fail: (err) => {
                    resolve(imageUrl);
                },
            });
        });
    }

    async loadImages(options: PreloadImageOptions) {
        try {
            if (!options.imageUrls.length) {
                options.success && options.success({ images: [] });
                options.complete && options.complete({ images: [] });
                return;
            }
            const images = await Promise.all(options.imageUrls.map((url) => this.preloadImage(url)));
            // 预加载成功，可以在这里进行后续操作
            options.success && options.success({ images });
            options.complete && options.complete({ images });
        } catch (error) {
            // 预加载失败的错误处理
            console.error("Failed to preload images:", error);
            options.fail && options.fail({ error, images: [] });
            options.complete && options.complete({ error, images: [] });
        }
    }
}

下载图片到本地import { preloadImage } from "@/share/utils";

preloadImageFunc = new preloadImage();


this.preloadImageFunc.loadImages({
    imageUrls: imageUrls, // imageUrls 图片地址数组
    complete: ({ images }) => {
        // 下载完成 拿到新的图片地址数组images doSomething
    },
});