Wie fade-in Bildern, wenn geladen mit Vue

Habe ich diese Komponente, die fades in ein Bild, sobald es geladen wird an den client. Ich würde denken, es ist eine Vue-wie Weg, dieses Problem zu lösen, wie mit Vue events, konnten ihn aber nicht finden. Was ist die Vue Möglichkeit zu erkennen, wenn ein Bild geladen ist?

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

JS:

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'
});

CSS:

.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;
}

HTML:

<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>

  • @load="onLoaded"? (oder v-on:load="onLoaded") jsfiddle.net/vcL986Lx
  • Irgendwie funktioniert nicht im template: codepen.io/kslstn/pen/dZgqNW ich kann nicht finden die Dokumentation auf v-on:laden, vielleicht ist es aber genannt, wenn das Vue-app beginnt zu laden? Damals war die Vorlage wäre nicht fertig Rendern noch.
InformationsquelleAutor kslstn | 2017-11-28
  1. 9

    Können Sie die v-auf: (oder @ Kurzform) - syntax für die Bindung an DOM-event. In Ihrem Fall ist die load Ereignis, das ausgelöst wird, wenn das Bild geladen ist.

    Weil Sie sind, laden Sie das Bild "DOM-Art", die Sie nicht verwenden können v-if denn dann Vue nicht leisten, das element (aber Sie brauchen es, so dass das Bild src wird abgerufen). Stattdessen können Sie v-show, die gerendert wird, sondern verstecken das element.

    JS:

    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'
});

    CSS:

    .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;
}

    HTML:

    <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>

    • Schön! Danke. Ich habe aktualisiert mein zuvor gebrochen codepen: codepen.io/kslstn/pen/dZgqNW habe ich entfernt montiert und Methoden, wie Sie nicht mehr notwendig, auf diese Weise!
    • Ich denke, das funktioniert nur beim ersten laden. Zumindest in meinem Fall. Weil die @load-Ereignis wird nicht ausgelöst, wenn das Bild bereits im Cache befinden. Ohne das @load-Ereignis this.loaded nie auf true gesetzt sein Versteck mein Bild für immer... – ich habe nicht gefunden, eine richtige Lösung bisher, obwohl. – aber ich sehe auch, dass Ihr codepen funktioniert... ?. Mein code nicht ?♂️
    • huh, noch nie davon gehört, aber es echt aussieht. Möchten Sie vielleicht zu prüfen, Vanille-Lösungen, um zu zwicken, Vue s-code, wie stackoverflow.com/questions/12354865/... oder mikefowler.mir/journal/2014/04/22/Cache-Bilder-laden-Ereignis | Die vielversprechende Lösung sieht aus wie die eine entlang der "set-event-listener dann src"
    • danke @yuriy636. Ich denke, dass ich auch schon gefunden und lese alle deine drei Seiten. Keiner von Ihnen schien mein problem zu lösen. (Wobei ich sagen muss, dass ich vielleicht nicht ganz zu widmen, zu versuchen, alles,...) .
    InformationsquelleAutor yuriy636
Schreibe einen Kommentar