js 异步加载文件。

/**
 * 定义一个异步函数来加载文件列表
 * @param {string[]} fileUrlList - 文件URL列表
 * @param {function} onCompleteCallback - 所有文件加载完成后的回调函数
 * @param {function} onProgressCallback - 加载进度更新的回调函数 (可选)
 * @returns {Promise<void>}
 */
async function loadFiles(fileUrlList, onCompleteCallback, onProgressCallback) {
    let loadedFiles = 0; // 已加载的文件数
    const totalFiles = fileUrlList.length;

    for (let i = 0; i < totalFiles; i++) {
        const url = fileUrlList[i];
        try {
            const response = await fetch(url); // 传入的URL
            if (!response.ok) {
                throw new Error(`HTTP 错误！状态码：${response.status} - URL: ${url}`);
            }
            loadedFiles++; // 成功加载文件后计数

            // 调用进度回调函数更新进度条
            if (onProgressCallback) {
                onProgressCallback(loadedFiles, totalFiles);
            }
            //console.log(`文件 ${i + 1} 下载成功: ${url}`);
        } catch (error) {
            console.error(`文件 ${i + 1} 加载失败：`, error);
        }
    }

    // 所有文件加载完成后，调用完成回调函数
    if (onCompleteCallback) {
        onCompleteCallback();
    }
}

使用：

const fileUrls = ["https://www.phpernote.com/logo.gif"];

// 更新进度条的函数
function updateProgress(loaded, total) {
    const progress = (loaded / total) * 100;
    console.log(`加载进度：${progress.toFixed(2)}%`);
}

// 所有文件加载完成后的回调
function allFilesLoaded() {
    console.log("所有文件加载完成！");
}

// 调用loadFiles，传入文件列表、完成回调和进度回调
loadFiles(fileUrls, allFilesLoaded, updateProgress);

• 使用JavaScript动态加载JS文件
• JS异步预加载网页
• JQuery判断页面是否已经加载了JQuery文件
• yaf自动加载文件的规则
• JavaScript和JQuery动态加载JS文件和Css文件
• JavaScript图片预加载技术
• JS 判断图片是否加载完毕
• JavaScript中动态加载音频的方法