加载 Vue 时如何淡入图像 [英] How to fade in images when loaded with Vue

问题描述

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

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

Vue.component('imageThatFadesInOnLoad',{数据:函数(){返回 {src: 'http://via.placeholder.com/350x150',加载:假，}},挂载:函数(){var image = new Image()var that = thisthis.loaded = image.addEventListener('load', function(){that.onLoaded()})//这是关键部分:它基本上是vanilla JSimage.src = this.src},方法:{onLoaded(){this.loaded = true}},模板:`<div class="wrapper"><transition name="淡入淡出"><img class="icon" v-bind:src="src" v-if="loaded">&nbsp;

`})新的 Vue({el: '#wrapper'});

.wrapper{宽度:350px；高度:150px；背景:石板灰；}.fade-enter-active {过渡:不透明度 3 秒缓入；}.淡入淡出{不透明度:1；}.淡入淡出{不透明度:0；}

<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"><;/脚本><div id="包装器"><image-that-fades-in-load></image-that-fades-in-load>

解决方案

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

因为您正在以DOM 方式"加载图像，所以您不能使用 v-if 因为那样 Vue 将不会渲染元素(但您需要它，所以图像 src 被获取).相反，您可以使用 v-show，它将呈现但隐藏元素.

Vue.component('imageThatFadesInOnLoad', {数据:函数(){返回 {src: 'http://via.placeholder.com/350x150',加载:假，}},方法: {onLoaded() {this.loaded = true;}},模板:`<div class="wrapper"><transition name="淡入淡出"><img class="icon" v-bind:src="src" v-on:load="onLoaded" v-show="loaded">&nbsp;

`});新的 Vue({el: '#wrapper'});

.wrapper {宽度:350px；高度:150px；背景:石板灰；}.fade-enter-active {过渡:不透明度 3s 渐出；}.fade-enter-to {不透明度:1；}.淡入淡出{不透明度:0；}

<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"><;/脚本><div id="包装器"><image-that-fades-in-load></image-that-fades-in-load>

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?

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/vue@2.4.4/dist/vue.js"></script>
<div id="wrapper">
<image-that-fades-in-on-load></image-that-fades-in-on-load>
</div>

解决方案

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

Because you are loading the image "the DOM way" you can't use v-if because 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.

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/vue@2.4.4/dist/vue.js"></script>

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

这篇关于加载 Vue 时如何淡入图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！