Vuejs 2: img.complete 속성을 검출하는 방법

Vuejs 2: img.complete 속성을 검출하는 방법

다음과 같은 개체로 이미지 목록을 가져오는 코드가 있습니다.

[
  { 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 태그의.completeVueJs에서는 어떻게 할 수 있을까요?

해봤어요v-show="this.complete || image.loaded"그렇지만this을 가리키다window메서드 호출을 사용하여 호출을 시작한 요소에 참조를 전달할 수 있다고 생각했는데, 그 방법도 찾을 수 없습니다.

모든 이미지를 개별적으로 로드할 수 있습니다.new Image(), 리스트 엔터를 에 바인드 합니다.load이벤트 제공 전src거기서부터 데이터를 갱신해, 로트 코드와 오브젝트 전체가 로드되어 있는 것을 나타냅니다.Vue가 작성하는 DOM 요소를 사용할 수 있는 것이 훨씬 좋습니다.

이 작업은 지시어를 사용하여 수행할 수 있습니다.

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

이 방법으로는 운이 없었고, 이미지가 로딩되어 있었지만, 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;
}

v-module에서 찾고 있는 기능을 https://vuejs.org/v2/api/#v-module에서 제공할 수 있음

네이티브에 바인드할 수 있습니다.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');
        }
    }
});

언급URL : https://stackoverflow.com/questions/47984004/vuejs-2-how-to-detect-img-complete-property