web-dev-qa-db-fra.com

Vuejs 2: comment détecter la propriété img.complete

J'ai du code qui va chercher une liste d'images comme un objet comme

[
  { src: '/path/to/img.jpg', loaded: false },
  ...
]

et un template qui les rend ensuite en HTML comme:

<div
  v-for="image in alltheimages"
  :key="image.id" >
  <transition name="fade" appear>
  <img
    :src="image.src"
    v-show="image.loaded"
    @load="image.loaded = true"
    />
  </transition>
</div>

Cela fonctionne bien lors du premier chargement de la page. les images apparaissent en fondu dès qu'elles sont chargées.

Cependant, il y a un problème lorsque l'image est déjà chargée dans le cache , car le @load ne se déclenche jamais sur le nouvel élément <img>. Dans ces situations, je peux vérifier la propriété .complete de la balise DOM img, mais comment puis-je le faire dans VueJS?

J'ai essayé v-show="this.complete || image.loaded" mais this pointe simplement sur window. Je pensais pouvoir utiliser un appel de méthode et transmettre une référence à l'élément qui avait initié l'appel, mais je ne peux pas trouver comment le faire non plus.

Je me rends compte que je pourrais charger toutes les images séparément avec new Image(), lier un listenter à l'événement load avant de fournir src et à partir de là mettre à jour les données pour indiquer que la chose est chargée, mais que tout un code et des objets sont beaucoup plus agréables à être capable d'utiliser les éléments DOM créés par Vue.

javascripthtmlvuejs2
7
artfulrobot

Vous pouvez le faire avec une directive.

<div
  v-for="image in alltheimages"
  :key="image.id" >
  <transition name="fade" appear>
  <img
    :src="image.src"
    v-show="image.loaded"
    v-loadedifcomplete="image"
    @load="image.loaded = true"
    />
  </transition>
</div>

Puis dans votre application.

new Vue({
  ...
  directives: {
    loadedifcomplete: function(el, binding) {
       if (el.complete) {
         binding.value.loaded = true;
       }
    }
  }
  ...
});
2
artfulrobot

v-cloak peut fournir les fonctionnalités que vous recherchez https://vuejs.org/v2/api/#v-cloak

0
Parvesh Goyal