SOURCE

var urls = [
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting1.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting2.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting3.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting4.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting5.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmn6.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmn7.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmn8.png",
];

function loadImg(url){
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = function(){
            console.log('一张图');
            resolve(img);
        };
        img.onerror = function(){
            reject(new Error('错了'))
        };
        img.src = url;
    })
}

function limitLoad(urls, handler, limit){
    const data = [];
    let p = Promise.resolve();
    const handleUrls = (urls) => {
        const doubleDim = [];
        const len = Math.ceil(urls.length / limit);
        for(let i = 0; i < len; i++){
            doubleDim.push(urls.slice(i*limit, (i+1)*limit));
        }
        return doubleDim;
    }
    const ajaxImage = (urlCollect) => {
        console.log(urlCollect);
        return urlCollect.map(url => handler(url));
    }
    const doubleDim = handleUrls(urls);
    doubleDim.forEach(urlCollect => {
        p = p.then(() => Promise.all(ajaxImage(urlCollect))).then(res =>{
            data.push(...res);
            return data;
        })
    })
    return p;
}

limitLoad(urls, loadImg, 3).then(res =>{
    console.log(res);
    res.forEach(img => {
        document.body.appendChild(img);
    })
})