Как вызвать функцию после завершения загрузки vue-lazyload? - PullRequest
Новая
       8

Как вызвать функцию после завершения загрузки vue-lazyload?

0 голосов
/ 23 марта 2019

Я использую этот компонент: https://github.com/hilongjw/vue-lazyload

Учитывая приведенный ниже код, как я могу вызвать функцию callMe после загрузки изображения (imgUrl)? 

<template>
   <div class="hero-unit-bg" v-lazy:background-image="imgUrl" >
  </div>
</template>

<script>
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

export default {
  name: 'HeroUnit',
  data () {
    return {
      imgUrl: 'img/hero-unit-bg.png' // String
    }
  },
    methods: {
   callMe: function (event) {
      alert('Done Lazy Loading Img')
    },
  }
}
</script>

1 Ответ

0 голосов
/ 23 марта 2019

В документации это описано :

Event Hook 

vm.$Lazyload.$on(event, callback) vm.$Lazyload.$off(event, callback)  
vm.$Lazyload.$once(event, callback)

$on Прослушивание пользовательских событий, загрузка, загрузка, ошибка
$once Слушайте пользовательское событие, но только один раз.Слушатель будет удален после первого запуска.
$off Удалить прослушиватели событий. 

vm.$Lazyload.$on

Аргументы:
{строка} событие
{Функция} обратный вызов

Пример 

vm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
  console.log(el, src)
})
...