Skip to content

如何等待异步加载n张图片完成? #17

@milixie

Description

@milixie
loadImg(src) {
        return new Promise((resolve, reject) => {
          let img = new Image()
          img.onload = () => resolve(img)
          img.onerror = reject
          img.src = src
        })
      },

对于vue

<img :src='src1' ref="testImg1">
<img :src='src2' ref="testImg2">

data() {
  return {
    src1: 'http://one.com/avatar1.png',
src2: 'http://one.com/avatar2.png'
  }
},
methods: {
  init() {
    const refImg1 = this.$refs.testImg1
    const refImg2 = this.$refs.testImg2
    Promise.all([
      this.loadImg(refImg1, this.src1 ),  
      this.loadImg(refImg2, this.src2 ),  
    ]).then(res => {
        console.log('---图片均已加载完毕---')
    })
  },
  loadImg(refImg, src) {
        return new Promise((resolve, reject) => {
          refImg.onload = () => resolve(refImg)
          refImg.onerror = reject
          refImg.src = src
        })
      },
}




Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions