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

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

小太阳...

6451人浏览 · 2022-01-14 15:57:52

小太阳... · 2022-01-14 15:57:52 发布

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

语法：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();
      }
    }
  }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^