vue2使用vue-lazyload等待图片加载完成，后手动触发图片的懒加载

在Vue2中，可以使用vue-lazyload插件来实现图片的懒加载。如果想要手动触发图片的懒加载，你可以使用以下步骤：

1. 在模板中，添加一个图片的占位符，并设置其src属性为一个默认的占位图片，例如：

<img v-lazy="imageSrc" src="loading.gif"/>

2. 在组件中，使用`Vue.prototype.$Lazyload`方法获取到vue-lazyload的实例。例如：

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

export default {
  mounted () {
    this.lazyload = Vue.prototype.$Lazyload({/* options */})
  },
  methods: {
    loadImages () {
      const images = document.querySelectorAll('img[v-lazy]')
      images.forEach(image => {
        if (this.isVisible(image)) {
          this.lazyload.lazyLoad(image)
        }
      })
    },
    isVisible (element) {
      const rect = element.getBoundingClientRect()
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
      )
    }
  }
}

3. 在组件的`mounted`钩子中，初始化vue-lazyload实例，并将其赋值给组件的`lazyload`属性。

4. 在组件的`loadImages`方法中，使用`querySelectorAll`方法获取到所有设置了`v-lazy`指令的图片元素，并遍历这些元素。如果某个图片元素可见，则调用`lazyload.lazyLoad`方法手动触发它的懒加载。

5. 在组件中，可以在`window`对象的`scroll`事件和`resize`事件中调用`loadImages`方法，以便在滚动和窗口大小变化时动态地触发图片的懒加载。例如：

mounted () {
  this.lazyload = Vue.prototype.$Lazyload({/* options */})
  window.addEventListener('scroll', this.loadImages)
  window.addEventListener('resize', this.loadImages)
},
beforeDestroy () {
  window.removeEventListener('scroll', this.loadImages)
  window.removeEventListener('resize', this.loadImages)
}