JSFiddle - React, Tailwind, and code Playground

by ruirui

HTML

<div id="image-list">
</div>

CSS

img {
  display: block;
  margin-top: 10px;
}

JavaScript

function loadImg(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = function() {
      resolve(img)
    };
    img.onerror = function(e) {
      reject(e)
    };
    img.src = url;
  })
}

function addToHtml(img) {
  var imageList = document.getElementById('image-list');
  imageList.appendChild(img);
}
var urls = ['http://season.jpanj.com/001.jpg', 'http://season.jpanj.com/002.jpg', 'http://season.jpanj.com/003.jpg', 'http://season.jpanj.com/004.jpg', 'http://season.jpanj.com/005.jpg', 'http://season.jpanj.com/006.jpg', 'http://season.jpanj.com/007.jpg', 'http://season.jpanj.com/008.jpg', 'http://season.jpanj.com/009.jpg', 'http://season.jpanj.com/010.jpg', 'http://season.jpanj.com/011.jpg', 'http://season.jpanj.com/012.jpg', 'http://season.jpanj.com/013.jpg', 'http://season.jpanj.com/014.jpg', 'http://season.jpanj.com/015.jpg', 'http://season.jpanj.com/016.jpg',
'http://season.jpanj.com/017.jpg', 'http://season.jpanj.com/018.jpg', 'http://season.jpanj.com/019.jpg', 'http://season.jpanj.com/020.jpg', 'http://season.jpanj.com/021.jpg'];


let queues = [];
let max = 2;
let count = 0;

function load(url) {
  var p = new Promise(function(resolve, reject) {
    queues.push({
      url: url,
      resolve: resolve,
      reject: reject
    });
    loop();
  });
  return p;
}

function loop() {
  let item;
  while (count <= max && (item = queues.shift())) {
    handleImage(item);
  }
}

function handleImage(item) {
  let url = item.url,
    resolve = item.resolve,
    reject = item.reject;
    count = count + 1;
  loadImg(url).then((image) => {
    resolve(image);
    count -= 1;
    loop();
  }).catch((e) => {
    reject(e);
    count -= 1;
    loop();
  });
}
// 调用方法：
urls.forEach(url => load(url).then(addToHtml))