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

最新推荐文章于 2023-07-06 11:45:00 发布

小太阳...

最新推荐文章于 2023-07-06 11:45:00 发布

阅读量6.1k

点赞数 2

分类专栏： JavaScript vue 文章标签： javascript vue.js onload 图片加载

本文链接：https://blog.csdn.net/weixin_46074961/article/details/122496082

版权

JavaScript 同时被 2 个专栏收录

42 篇文章 4 订阅

订阅专栏

vue

36 篇文章 3 订阅

订阅专栏

我的场景：需要图片在加载完成之后，获取图片的高度，给别的组件传值

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

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

<body>
 <img
   src="xxx"
   onload="getImg()"
 >
 <script>
   function getImg() {
     console.log('需要执行的操作');
   }
 </script>
</body>
执行: // 需要执行的操作

vue
部分代码如下：

 <img
   id="profileImg"
   :src="imgSrc"
   class="profile-img"
   @load="loadImage">
   ...
  data() {
    return {
      imgSrc: '',
      imageWidth: 0
    };
  },
  methods: {
    // 获取图片的宽度
    getImageWidth() {
      let imgWrapper = document.getElementById('profileImg');
      this.imageWidth = imgWrapper.offsetWidth;
    },
    loadImage() {
      if (this.imgSrc !== '') {
        this.getImageWidth();
      }
    }
  }

优惠劵

小太阳...

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js和vue的图片加载完成事件

我的场景：需要图片在加载完成之后，获取图片的高度，给别的组件传值语法：onload 事件在图片加载完成后立即执行可以使用img的onload事件，等图片加载完成之后再执行其他操作js<body> <img src="xxx" onload="getImg()" > <script> function getImg() { console.log('需要执行的操作'); } </script></bo
复制链接

扫一扫