使用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效果圖

可以看到圖片沒有一起加載，是按照每次三張加載的