uni-app 图片本地缓存案例交流分享 控制downloader数量 避免手机发烫

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app 图片本地缓存案例交流分享 控制downloader数量 避免手机发烫

之前有写过<<h5+的Downloader下载网络图片缓存到本地的案例>> http://ask.dcloud.net.cn/article/256
但后来才发现图片比较多时,downloader创建过多,手机立马发烫;
后来解决了也没有更新;
今天项目刚发出去,稳定下来;现在重新整理了一个案例分享给大家;

主要优化和解决的问题:

  1. 图片显示,先检查本地是否存在,如果存在则使用本地;如果不存在则联网下载,保存在本地

  2. 使用背景控制图片样式;比src灵活;

  3. 不同的场景,使用不同的图片下载默认图;(我项目中头像和产品的下载默认图是不一样的)

  4. 单个downloader下载,避免网速快或图片多创建过多downloader,导致手机发烫的问题

  5. 避免任务队列中,图片已存在,downloader下载卡顿的问题

  6. 加入下载完成的渐变动画,

  7. 其他,自己发现…

使用方法很简单:两步!!!

  1. 导入imgload.css imgload.js md5.min.js 还有一张透明图translate.png
  2. 联网获取数据后,拼接的img格式为:

好了,具体看附件的案例

图片本地缓存demo.zip


Harmonyos Next教程
1 回复

在uni-app中，实现图片本地缓存并控制downloader数量以避免手机发烫，可以通过结合uni.downloadFile、uni.saveFile、以及任务队列管理来实现。以下是一个示例代码，展示如何控制并发下载数量，避免手机因过多并发下载而过热。

示例代码

  1. 定义全局下载任务队列和并发数量
let downloadQueue = [];
const MAX_CONCURRENT_DOWNLOADS = 3;  // 设定最大并发下载数量
let activeDownloads = 0;
  1. 添加下载任务到队列
function queueDownload(url, filePath) {
    downloadQueue.push({ url, filePath });
    processQueue();
}
  1. 处理下载队列
function processQueue() {
    if (activeDownloads >= MAX_CONCURRENT_DOWNLOADS || downloadQueue.length === 0) {
        return;
    }

    let task = downloadQueue.shift();
    activeDownloads++;

    uni.downloadFile({
        url: task.url,
        success: (res) => {
            uni.saveFile({
                tempFilePath: res.tempFilePath,
                success: (saveRes) => {
                    console.log(`File saved to ${saveRes.savedFilePath}`);
                    activeDownloads--;
                    processQueue();  // 继续处理队列中的下一个任务
                },
                fail: (err) => {
                    console.error(`Failed to save file: ${err.message}`);
                    activeDownloads--;
                    processQueue();  // 即便失败，也要继续处理队列
                }
            });
        },
        fail: (err) => {
            console.error(`Failed to download file: ${err.message}`);
            activeDownloads--;
            processQueue();  // 即便失败，也要继续处理队列
        }
    });
}
  1. 使用示例
// 示例：下载三张图片
queueDownload('https://example.com/image1.jpg', `${uni.env.USER_DATA_PATH}/image1.jpg`);
queueDownload('https://example.com/image2.jpg', `${uni.env.USER_DATA_PATH}/image2.jpg`);
queueDownload('https://example.com/image3.jpg', `${uni.env.USER_DATA_PATH}/image3.jpg`);

说明

  • 队列管理：通过downloadQueue数组来管理所有待下载的任务。
  • 并发控制：通过activeDownloads变量来跟踪当前正在进行的下载任务数量，确保不超过MAX_CONCURRENT_DOWNLOADS。
  • 任务处理：processQueue函数负责从队列中取出任务并执行下载，下载完成后递减activeDownloads并尝试处理下一个任务。

这种方法可以有效控制下载并发数量，减少因过多并发下载导致的手机发热问题。同时，通过队列管理确保所有任务都能按顺序被处理。

回到顶部