使用Promise和递归函数，使得图片批量加载可以控制

前言： 现在的页面使用图片越来越频繁，如果用户的电脑网速快还好，一般不会有问题，如果是慢网速的用户，一次加载100张甚至更多的图片，就会导致加载超时的问题; 为了解决这个问题，我们可以尝试使用Promise和递归函数的原理，只有原理，具体的使用需要结合实际的业务场景

废话不多说，直接上代码

// 这段代码可以直接放到js文件里面运行，设置的是10张图片，每次加载三张
var imgArr = [
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560420073804&di=fb5b612533fa9d7d7216568d66246969&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560420073803&di=ac8b0f20ff890c7e0e951ead57d516df&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg',
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560420073803&di=04a6d723122286aa6893c3da2191487d&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367aa7f3cc7424738bd4b31ce525.jpg',
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560420073803&di=464f4ba2a536d32482cd0a61a7bee369&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ff603918fa0ec08fa3139e00153ee3d6d55fbda5f.jpg',
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560420073802&di=724a07ea47085370a46ee74088948d37&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb3b7d0a20cf431ad7427dfad4136acaf2fdd98a9.jpg',
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560420073801&di=1daddbfaf785d36c76518ca8bf3650b5&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fd058ccbf6c81800aec9d109abb3533fa828b472e.jpg',
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560420073801&di=c4dc39e432f4c1f8a2e421692cd5e009&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F0b46f21fbe096b636660c7c406338744ebf8ac2d.jpg',
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560420073801&di=c43c8153f077e7990f306eaaff9e3b23&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fc8177f3e6709c93d7afd9163953df8dcd1005412.jpg',
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560420073800&di=4bcfb078d2c075b2e0e0b2d86d4db31e&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F2934349b033b5bb569adb96a3cd3d539b600bc28.jpg',
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560420073800&di=cd9f682138f5446ec984fde579956d69&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F5fdf8db1cb134954e4eb74f05c4e9258d0094aa9.jpg',
];
function getImg(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.onerror = function() {
      reject(0);
    }
    image.onload = function() {
      resolve(1);
    }
    image.src = url;
  });
}
function loadImgs(per_load, n) {
  // per_load - 每次加载多少张图片
  // n - 加载第(n+1)批的图片（比如：10张图片，每次加载3张， n=1 表示加载第二批图片，即第 3，4，5 张图片）
  // 加载第几组的图片数据
  const loadArr = [];
  for (var i = 0; i < per_load; i++) {
    imgArr[n*3+i] && loadArr.push(getImg(imgArr[n*3+i]));
  }
  Promise.all(loadArr)
  .then(res => {
    if (imgArr[(n+1) * 3]) {
      loadImgs(per_load, n+1);
    }
  })
}
loadImgs(3, 0);

network效果图

可以看到图片没有一起加载，是按照每次三张加载的