Skip to content

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

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




Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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