Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
milixie opened this issue Jan 2, 2020 · 0 comments
Open

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

milixie opened this issue Jan 2, 2020 · 0 comments

Comments

@milixie
Copy link
Owner

milixie commented Jan 2, 2020

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




Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant