文章

js和vue的图片加载完成事件

js和vue的图片加载完成事件

发表于
作者 独行的风
1 分钟阅读
js和vue的图片加载完成事件

js和vue的图片加载完成事件

场景：需要图片在加载过程中显示loading状态

语法：onload 事件在图片加载完成后立即执行

可以使用img的onload事件，等图片加载完成之后再执行其他操作

JS

1
2
3
4
5
6
7
8
9
10
11

<body>
  <img
    src="xxx"
    onload="getImg()"
    >
  <script>
    function getImg() {
      console.log('图片加载完成')
    }
  </script>
</body>

vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<img
  id="profileImg"
  :src="imgSrc"
  class="profile-img"
  @load="loadImage">
    ...

    
    data() {
      return {
        imgSrc: '',
        imageWidth: 0
      };
    },
    methods: {
      loadImage() {
        console.log('图片加载完成')
      }
    }
知识积累, 开发整理
开发整理 vue
本文由作者按照 CC BY 4.0 进行授权