1. const url = 'https://xxx.png'
    3. function loadImg(src) {
    4.         return new Promise(
    5.             (resolve, reject) => {
    6.                 const img = document.createElement('img')
    7.             img.onload = () => {
    8.                     resolve(img)
    9.             }
    10.             img.onerror = () => {
    11.                   const err = new Error(`图片加载失败 ${src}`)
    12.                     reject(err)
    13.             }
    14.             img.src = src
    15.         }
    16.     )
    17. }
    19. loadImg(url).then(img => {
    20.         console.log(img.width)
    21.       return img
    22. }).then(img => {
    23.         console.log(img.height)
    24. }).catch(err => console.error(ex))
    1. // 多张图片
    2. const url1 = 'https://xxx.png'
    3. const url2 = 'https://xxx.png'
    5. function loadImg(src) {
    6.     return new Promise(
    7.         (resolve, reject) => {
    8.             const img = document.createElement('img')
    9.             img.onload = () => {
    10.                 resolve(img)
    11.             }
    12.             img.onerror = () => {
    13.                 const err = new Error(`图片加载失败 ${src}`)
    14.                 reject(err)
    15.             }
    16.             img.src = src
    17.         }
    18.     )
    19. }
    21. loadImg(url1).then(img => {
    22.     console.log(img1.width)
    23.     return img1              // return 普通对象
    24. }).then(img1 => {
    25.     console.log(img1.height)
    26.       return loadImg(url2)    // return promise 实例
    27. }).then(img2 => {
    28.     console.log(img2.height)  
    29.       return img2
    30. }).then(img2 => {
    31.     console.log(img2.width)  
    32. })