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);
    }

    function imgQueue(urls, max) {
        var count = 0;
        var loadPromises = [];
        loop();
        function loop() {
            while (count < max) {
                var url = urls.shift();
                if(!url) {
                    break;
                }
                loadPromises.push(loadImg(url));
                count++
            }
            promiseLoop();
        }
        function promiseLoop() {
            var promise = Promise.resolve();
            while (loadPromises.length) {
                var item = loadPromises.shift();
                if(!item) {
                    break
                }
                promise = promise.then(() => {
                    return item
                }).then((img) => {
                    addToHtml(img)
                    count--
                    loop()
                }).catch(err => {
                    console.log(err)
                    count--
                    loop()
                })
            }
            return promise
        }
        
    }
    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',...