javascript 加载 Vue 时如何淡入图像

How to fade in images when loaded with Vue

提问by kslstn

I created this component that fades in an image once it is loaded to the client. I would think there is a more Vue-like way to solve this, like using Vue events, but could not find it. What is the Vue way to detect when an image is loaded?

我创建了这个组件，一旦图像加载到客户端，它就会淡入淡出。我认为有一种更像 Vue 的方法来解决这个问题，比如使用 Vue 事件，但找不到它。Vue 检测图像何时加载的方法是什么？

https://codepen.io/kslstn/pen/ooaPGW

https://codepen.io/kslstn/pen/ooaPGW

Vue.component('imageThatFadesInOnLoad',{

  data: function(){
    return {
      src: 'http://via.placeholder.com/350x150',
      loaded: false,
    }
  },

  mounted: function () {
    var image = new Image()
    var that =  this
    this.loaded = image.addEventListener('load', function(){that.onLoaded()}) // This is the key part: it is basically vanilla JS
    image.src = this.src
  },

  methods:{
    onLoaded(){
      this.loaded = true
    }
  },

  template: `
    <div class="wrapper">
      <transition name="fade">
        <img class="icon" v-bind:src="src" v-if="loaded">&nbsp;
      </transition>
   </div>
  `
})

new Vue({
  el: '#wrapper'
});

.wrapper{
  width: 350px;
  height: 150px;
  background: slategrey;
}
.fade-enter-active {
  transition: opacity 3s ease-in-out;
}
.fade-enter-to{
  opacity: 1;
}
.fade-enter{
  opacity: 0;
}

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="wrapper">
<image-that-fades-in-on-load></image-that-fades-in-on-load>
</div>

回答by yuriy636

You can use the v-on:(or @shorthand) syntax for binding to any DOM event. In your case the loadevent, which is triggered when the image is loaded.

您可以使用v-on:（或@简写）语法绑定到任何 DOM 事件。在您的情况load下，加载图像时触发的事件。

Because you are loading the image "the DOM way" you can't use v-ifbecause then Vue will not render the element (but you need it to, so the image src is fetched). Instead you can use v-show, which will render but hide the element.

因为您正在以“DOM 方式”加载图像，所以您无法使用，v-if因为 Vue 将不会呈现该元素（但您需要它，因此获取了图像 src）。相反，您可以使用v-show，它将呈现但隐藏元素。

Vue.component('imageThatFadesInOnLoad', {
  data: function() {
    return {
      src: 'http://via.placeholder.com/350x150',
      loaded: false,
    }
  },
  methods: {
    onLoaded() {
      this.loaded = true;
    }
  },
  template: `
    <div class="wrapper">
      <transition name="fade">
        <img class="icon" v-bind:src="src" v-on:load="onLoaded" v-show="loaded">&nbsp;
      </transition>
   </div>
  `
});

new Vue({
  el: '#wrapper'
});

.wrapper {
  width: 350px;
  height: 150px;
  background: slategrey;
}

.fade-enter-active {
  transition: opacity 3s ease-in-out;
}

.fade-enter-to {
  opacity: 1;
}

.fade-enter {
  opacity: 0;
}

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="wrapper">
  <image-that-fades-in-on-load></image-that-fades-in-on-load>
</div>