使用JavaScript批量下载图片仅能下载9张，求代码问题排查

我用FileSaver在浏览器实现批量下载“另存为”功能，脚本在多数网站正常，但当前场景只能下载9张图片（页面实际有20多张），使用Tampermonkey运行脚本，代码如下：

function down() {
    var loc_gal = document.getElementsByClassName('detail-gallery-list')[0]
    var loc_url = loc_gal.getElementsByClassName('detail-gallery-item');

    var dump_url = [];
    for (let i = 0; i < loc_url.length; i++) {
        var dump = loc_url[0].querySelector('img').src;
        var splitname = dump.split('1.');
        var filename = splitname[0]+[i]+'.webp';
        // store url from filename into the array dump_url
        dump_url.push(filename)
    }

尝试了两种遍历方式均出现问题：

1. 可访问数组，但超过9张时重复下载已有的文件：

for (let x in dump_url){
        setTimeout(() => {
            saveAs(dump_url[x],'0.webp');
          }, 2000)
    }

2. 同样仅能下载9张图片：

dump_url.forEach(element => saveAs(element,'0.webp'))

1. 图片地址获取错误（核心问题） #

你的第一个循环里始终取loc_url[0]（第一个图片项）的src，而非当前循环的loc_url[i]，这会导致：

• 若网站图片命名不按序号递增规则，生成的地址可能无效，无法下载
• 即便命名规则符合，也没有正确获取页面每张图片的真实地址

修复：将loc_url[0]改为loc_url[i]：

for (let i = 0; i < loc_url.length; i++) {
    var dump = loc_url[i].querySelector('img').src; // 替换0为i
    var splitname = dump.split('1.');
    var filename = splitname[0] + i + '.webp';
    dump_url.push(filename)
}

2. 下载请求被浏览器拦截/限制 #

浏览器对同时发起的下载请求有数量限制，批量调用saveAs会被拦截，导致仅部分下载成功。

修复：给下载请求添加间隔延迟，同时设置唯一文件名避免冲突：

// 替换原遍历代码，用带索引的forEach实现延迟下载
dump_url.forEach((url, index) => {
    setTimeout(() => {
        saveAs(url, `image-${index}.webp`); // 用索引生成唯一文件名
    }, index * 2000); // 每个请求间隔2秒，避免并发过多
});

额外排查点 #

• 检查图片是否懒加载：若图片是懒加载，src可能是占位图，真实地址在data-src或其他属性中，需改为loc_url[i].querySelector('img').dataset.src（根据实际属性调整）
• 验证dump_url有效性：在控制台打印dump_url，逐个访问地址确认是否可打开，排除无效地址导致的下载失败

内容的提问来源于stack exchange，提问作者Xander