H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue如何在一个div块里面的img都加载完成后执行某函数?

vue如何在一个div块里面的img都加载完成后执行某函数?不是mounted

回答:

就是用imgload事件就可以了,给你个示例吧:

<div id="app">
  <div>已加载图片: <span v-text="loadedImages"></span>/{{ images.length }}</div>
  <div v-for="image in images">
    <img width="100" @load="imageLoaded" :src="image"  />
  </div>
</div>
new Vue({
    el: '#app',
  data() {
      return {
        loadedImages: 0,
        images: [
          '/wp-content/uploads/aaacj/202105021234/1111213744.jpg?h=350&auto=compress&cs=tinysrgb',
        'https://images.pexels.com/photos/429248/pexels-photo-429248.jpeg?h=350&auto=compress&cs=tinysrgb'
      ]
    }
  },
  methods: {
      imageLoaded() {
        this.loadedImages ++;
    }
  }
});

在线体验:https://jsfiddle.net/584rkwqd/

回答:

之前用过 imagesloaded

本文地址:H5W3 » vue如何在一个div块里面的img都加载完成后执行某函数?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址