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

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

您可以绑定到本机onLoad事件并调用组件中所需的任何方法。 演示

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