Question

我有一些代码可以将图像列表作为像

这样的对象获取

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

和模板，然后将它们呈现为HTML，如：

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

首次加载页面时效果很好;一旦图像重新加载，图像就会淡入。

但是当图片已经加载到缓存时会出现问题，因为@load永远不会触发新的<img>元素。在这些情况下，我可以检查DOM img标记的.complete属性，但是如何在VueJS中执行此操作？

我已尝试v-show="this.complete || image.loaded"，但this只是指向window。我以为我可以使用方法调用并将引用传递给发起调用的元素，但我也无法知道如何执行此操作。

我意识到我可以使用new Image()单独加载所有图像，在我提供load之前将监听器绑定到src事件，并从那里更新数据以说明事情已加载，但是整个代码和对象 - 能够使用Vue创建的DOM元素更好。

Answer 1

您可以使用指令执行此操作。

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

然后在您的应用中

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

Answer 2

v-cloak可能会提供您正在寻找的功能 https://vuejs.org/v2/api/#v-cloak

Answer 3

这种方法和vue-images-loaded都没有运气，但是vue-onload的魅力十足。

在main.js中添加：

import OnLoad from 'vue-onload'
Vue.use(OnLoad);

以及要加载的图像上：

<img 
  class="gallery__image" 
  v-onload="[image src]"
/>

然后只需在样式表中添加想要出现的任何CSS动画即可：

 /*loaded state*/
.gallery__image {
  opacity: 1;
  transition: opacity 1s linear;
}

 /*unloaded state*/
.gallery__image[data-src]{
  opacity: 0;
}

Answer 4

您可以绑定到本机onLoad事件，并调用组件中您想要的任何方法。 demo

<div id="app">
    <img v-for="num in [1,2,3,4]"
         src="http://lorempixel.com/400/200"
         :onLoad="onLoadHandler()" />
</div>


new Vue({
    el: '#app',
    methods: {
        onLoadHandler: function() {
            alert('hi');
        }
    }
});

Vuejs 2：如何检测img.complete属性

4 个答案: