Vue 로딩 시 이미지를 페이드하는 방법

Vue 로딩 시 이미지를 페이드하는 방법

클라이언트에 로드하면 이미지가 희미해지는 컴포넌트를 만들었습니다.Vue 이벤트를 사용하는 등 Vue와 같은 해결 방법이 있다고 생각합니다만, 찾을 수 없었습니다.이미지가 로드될 때 Vue가 감지하는 방법은 무엇입니까?

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>

(또는@모든 DOM 이벤트에 바인딩하기 위한 구문입니다.고객님의 경우loadevent - 이미지가 로드될 때 트리거됩니다.

사용할 수 없는 "DOM 방식" 이미지를 로드하고 있기 때문에v-if왜냐하면 Vue는 요소를 렌더링하지 않기 때문입니다(단, 렌더링해야 하기 때문에 이미지 src를 가져옵니다).대신 를 사용하면 요소를 렌더링하지만 숨길 수 있습니다.

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가 아닌 네이티브 CSS 솔루션을 사용하여 위의 답변에 대해 약간 다른 접근 방식을 제공합니다.<Transition>길.

아래 코드에서는 다음 코드를 추가합니다.class에게<img>로딩되면 전환이 트리거됩니다.

<template>
  <img
    :class="imgIsLoaded ? 'show' : ''"
    src="myImg.jpg"
    loading="lazy"
    @load="imgLoadedMethod"
  >
</template>
<script>
export default {
  data () {
    return {
      imgIsLoaded: false
    }
  },
  methods: {
    imgLoadedMethod () {
      this.imgIsLoaded = true
    }
  }
}
</script>
<style scoped>
img {
  opacity: 0;
  transition: 3s;
}

img.show {
  opacity: 1;
}
</style>

캐시된 이미지를 동적으로 바꿀 때 전환이 작동하도록 하려면 고유한 키를 추가해야 합니다.그렇지 않으면 vue의 컴파일러는 효율성을 위해 요소의 내용만 대체하고 전환은 트리거되지 않습니다.

<template>
  <div :style="{width: width+'px', height: height+'px'}">
    <transition name="fade">
      <img
        v-show="loaded"
        @load="onImageLoad"
        :src="src"
        :alt="alt"
        :width="width"
        :height="height"
        :key="src"
      />
    </transition>
  </div>
</template>
<script>
export default {
  props: ["src", "width", "height", "alt"],
  data() {
    return {
      loaded: false,
    };
  },
  methods: {
    onImageLoad() {
      this.loaded = true;
    },
  },
  watch: {
    src: {
      handler() {
        this.loaded = false;
      },
      immediate: true,
    },
  },
};
</script>
<style scoped>
.fade-enter-active {
  transition: opacity 1s ease-in-out;
}
.fade-enter-to {
  opacity: 1;
}
.fade-enter {
  opacity: 0;
}
</style>

언급URL : https://stackoverflow.com/questions/47535317/how-to-fade-in-images-when-loaded-with-vue