实现图片按顺序加载

1. 使用 Promise 封装一个加载图片的函数

function loadImg(src) {
    return new Promise((resolve, reject) => {
        let img = new Image()
        img.src = src
        img.onload = function() {
            let image = document.createElement('img')
            image.src = this.src
            document.body.appendChild(image)
            resolve(true)
        }
    })
}

2. 定义一个 load 函数递归调用 loadImage 函数，该函数接收一个图片链接的数组，按数组的顺序加载图片

const images = [
  './images/1.jpg',
  './images/2.jpg',
  './images/3.jpg',
]

function load(images) {
    if (images.length > 0) {
        loadImg(images[0]).then(res => {
            load(images.splice(1)) // 索引为 0 的图片已加载，所以我们还需要加载索引为 1 到末尾的图片
        })
    }
}

load(images)